내 페이지가로드 될 때 콘텐츠는 PHP가있는 데이터베이스에서 가져 와서 수많은 부트 스트랩 .col-xs-3열에 채워집니다 .row.
그러나 페이지가로드 된 후 JavaScript / jQuery를 사용하여.row 4 개 열마다 새 열 을 닫고 시작 해야하며 에서 관련 HTML을 이동해야하는 코드에 삽입해야합니다. 이는 페이지의 콘텐츠 양이 특정 열을 숨기는 검색 창 내 사용자 입력에 따라 동적으로 변경 될 수 있기 때문입니다.keyup
내 페이지의 HTML 구조는 다음과 같습니다.
<input id="search" type="text">
<div class="row">
<div class="col-xs-3 col-flex">1</div>
<div class="col-xs-3 col-flex">2</div>
<div class="col-xs-3 col-flex">3</div>
<div class="col-xs-3 col-flex">4</div>
<div class="col-xs-3 col-flex">5</div>
<div class="col-xs-3 col-flex">6</div>
</div>
내가 그렇게 필요한 반면 :
<input id="search" type="text">
<div class="row">
<div class="col-xs-3 col-flex">1</div>
<div class="col-xs-3 col-flex">2</div>
<div class="col-xs-3 col-flex">3</div>
<div class="col-xs-3 col-flex">4</div>
</div>
<div class="row">
<div class="col-xs-3 col-flex">5</div>
<div class="col-xs-3 col-flex">6</div>
</div>
그러나 검색 창에 사용자가 입력하면 표시되는 페이지 내용이 다음과 같이 변경 될 수 있고 행이 올바른 위치에서 동적으로 닫힐 필요가 있기 때문에 PHP로 새 행을 하드 코딩 할 수 없습니다 ( 4누락 된 방법 에 유의하십시오 ).
<input id="search" type="text">
<div class="row">
<div class="col-xs-3 col-flex">1</div>
<div class="col-xs-3 col-flex">2</div>
<div class="col-xs-3 col-flex">3</div>
<div class="col-xs-3 col-flex">5</div>
</div>
<div class="row">
<div class="col-xs-3 col-flex">6</div>
</div>
이것은 지금 내 jQuery이지만 작동하지 않는 것 같습니다.
$(document).ready(function() {
function rowBreak() {
var columnCount = 0;
$('col-flex:visible').each(function() {
columnCount++;
if (columnCount % 4 == 0) {
$(this).append('</div><div class="row">');
}
});
}
rowBreak();
$("#search").on("keyup", function() {
rowBreak();
});
});
편집 : 그리고 방금 깨달았습니다. 내 코드는 키를 누를 때마다 올바른 위치에 다시 추가하기 전에 추가 행 제거를 고려하지 않습니다.
또 다른 접근 방식은 다음 줄의 수정을 기반으로합니다.
$(this).append('</div><div class="row">');
이 줄은 다음과 같아야합니다.
var nextEles = $('.col-flex:hidden:gt(' + index + ')');
$('<div class="row">').append(nextEles).insertAfter(this.closest('div.row'));
주로 변수 columnCount는 유용하지 않습니다. 각 매개 변수를 살펴보십시오 .
내 스 니펫 :
function rowBreak() {
$('.col-flex:hidden').each(function (i, e) {
if (((i + 1) % 4 == 0) && ($(this).siblings().length != 3)) {
var x = $('.col-flex:visible:gt(' + i + ')');
$('<div class="row row-temp">').append(x).insertAfter($(this).closest('div.row'));
}
});
}
$(function () {
rowBreak();
$('#search').on('keyup', function () {
$('.col-flex').hide();
var s = this.value.toLowerCase();
$('.col-flex').filter(function () {
return $(this).find('h4').text().toLowerCase().indexOf(s) > -1;
}).show();
rowBreak();
});
});body {
padding: 10px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="form-group">
<input class="form-control" id="search" placeholder="Search...">
</div>
<div class="row">
<div class="col-xs-3 col-flex">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">AECLIM</h4>
</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-xs-3 col-flex">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">AEMET</h4>
</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-xs-3 col-flex">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">AME</h4>
</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-xs-3 col-flex">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">APMG</h4>
</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-xs-3 col-flex">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">ATCN</h4>
</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-xs-3 col-flex">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">METEOMET</h4>
</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-xs-3 col-flex">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">MMC 2016</h4>
</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-xs-3 col-flex">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">SATCOM 2016</h4>
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다