我使用同位素来过滤数据。
目前,我有一个 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)'
但它不起作用。
我的目的是使用 filter
限制要显示的项目。
您可以更改 filter: ':nth-child(-n+3)'
的值查看更多信息。
当我更改为 filter: ':nth-child(-n+2)'
的值时结果将显示:第一和第二 ul
.
如果先ul
包含 5 个项目,第二个 ul
包含 40 个项目,它还显示 45 个项目。
会失败,因为我只想显示 2 个项目,而不是两个项目的所有项目 ul
.
最佳答案
检查这个,
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
关于javascript - 过滤同位素中父元素的子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41564882/