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

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