Question

是否可以限制同位素中的条目数量？目前我正在调整Isotope的表格式数据结构，我正在添加动态排序。

它的方式 - 我有一定数量的HTML条目（目前有10个）。它们按时间添加排序。当用户选择某种排序时，数据库中可能存在与所请求的参数匹配的其他条目，但它们未被加载。所以我使用jQuery插入符合用户排序请求的元素

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

所有这一切都很完美，我唯一的问题就是我添加了更多元素（我希望保留一定数量的可见条目）。我可以做一个解决方法并限制容器的高度并设置overflow: hidden;，但我也实现了垂直无限滚动（当你滚动到底部时，会添加更多的条目）。所以这需要不断管理容器本身，在我看来应该有更好的方法来做到这一点？

另一种方法是添加新元素，进行排序，然后从底部删除不需要的条目，但这将是非常糟糕的，因为用户将看到过滤和动画的其他数据，然后删除。

所以我的问题..有没有办法限制同位素本身的条目？或者也许某人对如何限制它们有更好的了解？

由于

Answer 1

您可以使用nth-child CSS选择器限制过滤结果集，例如

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

这将显示前10个结果。

Answer 2

以为我会加上我的两分钱，因为:nth-child(-n+*)不适合我的情况。原因是nth-child按照它们在DOM中出现的顺序选择元素，所以如果你的元素是随机顺序，它就不会真正起作用。

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

jQuery Isotope限制元素数量？

2 个答案: