如何限制同位素的过滤结果？答案

【问题标题】：How do I limit Isotopes' filtered results?如何限制同位素的过滤结果？
【发布时间】：2014-06-18 05:07:28
【问题描述】：

我环顾四周，但找不到任何接近我想要的东西（仍在学习）。

场景

我正在使用http://isotope.metafizzy.co/ 过滤 rss 数据。

我正在拉 6 个不同的 RSS 提要，每个提要 10 个帖子，总共 60 个。

每组提要有 6 个过滤器（组合类型），这意味着我可以选择一次过滤多个。

由于数据量大，我只想在页面上显示最新的前15个。

据我了解，Isotope 需要查看全部数据才能正确过滤。

那么，问题是我怎么能只显示 15，无论我选择多少过滤器组合？

我不能使用 ':nth-child(-n+15)'，因为它只会选择 DOM 中的布局，而不是定位的元素。有什么指点吗？

伪代码：

$container.imagesLoaded(function(){
  $container.isotope({
    filter : comboFilter,
    itemSelector : '.element',

  }, function displayOnly15($elem) {

    //how do I display only 15?

  })
});

我是否错过了之前或之后的重要步骤/过程？

发现我可以这样做：

var $filtered = $container.data('isotope').$filteredAtoms;

然后使用类似的东西：

$keep = $filtered.slice(0,14);
$remove = $filtered.filter(function(i){
    return i > 14;
});

但是打电话：

$container
          .isotope( 'insert', $keep)
          .isotope( 'remove', $remove );

...之后，快速连续刷新布局两次。

救命！

【问题讨论】：

标签： jquery filtering limit jquery-isotope

【解决方案1】：

对于最后一段代码，我想你想使用 addItems (Found on this page)：

像这样使用它：

$container.isotope( 'addItems', elements )

它像插入一样工作，但它不会将项目放置出来。那么这个：

$container
      .isotope( 'addItems', $keep)
      .isotope( 'remove', $remove );

将进行交换，然后进行一种布局。

就只显示 15 个项目而言，您始终可以只 hide() 任何额外的项目。做任何其他事情都需要自定义 javascript 来创建和/或交换实际数据。

如果你朝着这个方向发展，比 Isotope 和 jQuery 更重的东西可能会有所帮助（如 angular、knout 等）。

【讨论】：