2

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

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

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

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

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

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

谢谢

4

2 回答 2

13

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

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

这将显示前 10 个结果。

于 2013-05-20T15:44:08.713 回答
1

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

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

于 2015-09-04T15:00:33.620 回答