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

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

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

Filter child of parent elements in isotope

javascript

jquery

jquery-isotope