アイソトープ内の親要素の子をフィルタする

Question

アイソトープを使用してデータをフィルタリングします。私はそれが<li>タグの代わりに、現在のようなulで濾過されなければならない必要

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>

：

現在、私のような構造体でHTMLを持っています。

私がしようとした：

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つのアイテムが表示されないようにするために失敗します.2つのアイテムすべてではありませんul。

Answer 1

チェックこれを、訪問jsfiddle一度詳細について

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