过滤同位素中父元素的子元素

Question

I using isotope to filter data.

Currently, I have an HTML with the struct like:

 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> 

I want it should be filtered with <li> tag instead of ul like current.

I tried to with:

filter: 'ul.list-posts li:nth-child(-n+2)'

but it's not working.

Edited: my fiddle at here

My purpose is using filter to limit item to show.

You can change values of filter: ':nth-child(-n+3)' to see more information.

When I change to values of filter: ':nth-child(-n+2)' the result will be shown: first and second ul .

If first ul contain 5 items, second ul contain 40 items, it also shows 45 items.

Will fail because I only want 2 item to appear, not all items of two ul .

Answer 1

Check this,

HTML CODE,

<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 CODE

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

For more details once visit jsfiddle link