Javascript 同位素母元素的过滤子元素

我使用同位素来过滤数据

目前，我有一个结构如下的HTML：

jQuery（'.container-filter-cate'）。同位素({
itemSelector:“.list posts”，
筛选器：'：第n个子级（-n+3）'
});








文本1
文本2
文本3
文本4


文本5
文本6


文本7
文本8
文本9
文本10

检查此项

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>

有关更多详细信息，请访问jsfiddle
您可以创建jsfiddle，但不会花费太多时间
$(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;
  });
})