데이터를 필터링하기 위해 동위 원소를 사용합니다.
현재 다음과 같은 구조의 HTML이 있습니다.
jQuery('.container-filter-cate').isotope({
itemSelector: '.list-posts',
filter: ':nth-child(-n+3)'
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<ul>
<li><a href="" data-filter="*">All Item</a></li>
<li><a href="" data-filter=".sport">Sport</a></li>
<li><a href="" data-filter=".cinema">Cinema</a></li>
<li><a href="" data-filter=".music">Music</a></li>
</ul>
<div class="container-filter-cate">
<ul class="list-posts sport">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
</ul>
<ul class="list-posts cinema">
<li>Text 5</li>
<li>Text 6</li>
</ul>
<ul class="list-posts music">
<li>Text 7</li>
<li>Text 8</li>
<li>Text 9</li>
<li>Text 10</li>
</ul>
</div>현재 <li>대신 태그 로 필터링해야합니다 ul.
나는 시도했다 :
filter: 'ul.list-posts li:nth-child(-n+2)'
하지만 작동하지 않습니다.
편집 됨 : 여기에 내 바이올린
내 목적은 filter표시 할 항목을 제한 하는 데 사용 됩니다.
의 값을 변경 filter: ':nth-child(-n+3)'하여 자세한 정보를 볼 수 있습니다 .
내가 값을 변경 filter: ':nth-child(-n+2)'하면 결과 값 이 표시됩니다 : first and second ul.
처음에 ul5 개 항목을 포함하고 두 번째에 ul40 개 항목을 포함하면 45 개 항목도 표시됩니다.
2 개의 모든 항목이 아닌 2 개의 항목 만 표시되기를 원하기 때문에 실패 ul합니다.
이것을 확인하십시오.
HTML 코드,
<ul id='oiso'>
<li><a href="javascript:;" data-filter="*">All Item</a></li>
<li><a href="javascript:;" data-filter=".sport">sport</a></li>
<li><a href="javascript:;" data-filter=".cinema">cinema</a></li>
<li><a href="javascript:;" data-filter=".music">music</a></li>
</ul>
<div class="container-filter-cate">
<ul class="list-posts sport">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
</ul>
<ul class="list-posts cinema">
<li>Text 5</li>
<li>Text 6</li>
</ul>
<ul class="list-posts music">
<li>Text 7</li>
<li>Text 8</li>
<li>Text 9</li>
<li>Text 10</li>
</ul>
</div>
JS 코드
$(document).ready(function() {
var $container = $('.list-posts');
$container.isotope({});
$('#oiso li a').on('click', function() {
var selector = $(this).attr('data-filter');
$container.isotope({
filter: $(selector).find("li")
});
return false;
});
})
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다