Question

我使用同位素过滤数据。

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

＆＃13;

jQuery('.container-filter-cate').isotope({
  itemSelector: '.list-posts',
  filter: ':nth-child(-n+3)'
});

＆＃13;

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

＆＃13;

我希望它应该使用<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 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;
  });
})

有关详细信息，请访问jsfiddle link

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

1 个答案: