過濾同位素中的母體元素的孩子

Question

我使用同位素過濾數據。

目前，我有一個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)'

，但它不工作。

編輯：my fiddle at here

我的目的是用filter限制項目展示。

您可以更改filter: ':nth-child(-n+3)'的值以查看更多信息。

當我更改爲filter: ':nth-child(-n+2)'的值時，結果將顯示爲：第一個和第二個ul。

如果第一個ul包含5個項目，第二個ul包含40個項目，它也顯示45個項目。

將失敗，因爲我只想要2項出現，而不是所有項目的兩個ul。

Answer 1

檢查這一點，

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; 
    }); 
}) 

這一次訪問的jsfiddle詳情link