jQuery同位素极限元素数量



是否可以限制同位素中的条目数量?目前,我正在为类似表格的数据结构调整同位素,并添加动态排序。

按照它的方式,我在HTML中有一组条目(目前为10个)。它们按添加的时间排序。当用户选择某种排序时,数据库中可能存在与请求的参数匹配的其他条目,但这些条目未被加载。因此,我使用jQuery插入与用户排序请求匹配的元素

$.get('myfile.php?request=something', function(callback) {
var $newItems = $(callback);
$('.container').isotope( 'insert', $newItems );
$('.container').isotope({ sortBy : USER_SORT });
});

所有这些都非常完美,我唯一的问题是添加了更多的元素(我希望保留一定数量的可见条目)。我可以做一个变通办法,限制容器的高度并设置overflow: hidden;,但我也实现了垂直无限滚动(当你滚动到底部时,会添加更多的条目)。因此,这需要不断管理容器本身,在我看来,应该有更好的方法来做到这一点?

另一种方法是添加新元素,进行排序,然后从底部删除不需要的条目,但这会很糟糕,因为用户会看到额外的数据经过过滤和动画处理,然后被删除。

所以我的问题。。有没有办法限制同位素本身的进入?或者也许有人对如何限制它们有更好的想法?

感谢

您可以使用nth-childCSS选择器来限制过滤结果集,例如

$grid.isotope({
filter: ':nth-child(-n+10)'
});

这将显示前10个结果。

我想再加两分钱,因为:nth-child(-n+*)不适合我的情况。原因是第n个子元素按照它们在DOM中出现的顺序选择元素,所以如果你的元素是随机顺序的,那就不起作用了。

解决此问题的一种不太优雅的方法是将同位素实例的项选择器更改为添加到要显示的项中的类,例如.item-selected,然后将该类添加到从arrangeComplete回调返回的filteredItems集合中的第一个n项中。这是不雅的,因为它要求你每次过滤同位素容器时都要销毁并重新初始化它,但它是有效的。

最新更新