javascript - jquery 有效地从大型集合中的前 15 个元素中删除一个类

Question

我正在尝试实现一个分页解决方案，我只在服务器上为所有项目查询一次。这会返回 3000 件元素。我向用户显示前 15 个，然后显示更多按钮。单击它后，我想显示接下来的 15 个项目。

我试过如下:

 $(this).parent().parent().find('li.hidden').removeClass (index, classes) ->
   if index < 15
     'hidden'
   else
    ''

这很有效，看起来很棒，但它当然会遍历所有 3000 个隐藏项，这会导致浏览器出现明显的延迟。

然后我考虑使用 .slice，因为这会使我的代码更加紧凑:

$(this).parent().parent().find('li.hidden').slice(0,15).removeClass('hidden')

虽然它很紧凑，但没有明显的速度提升，它仍然滞后。

所以我自作聪明，尝试了以下方法:

    all_hidden = $(this).parent().parent().find('li.hidden')
    for x in [1..15] by 1
      all_hidden[x].removeClass('hidden')

但不幸的是，这当然行不通(因为数组运算符不返回 jquery 集，并且使用切片运算符返回单个元素并不比 15 个元素的单个切片更好——我假设).

你知道从大约 3000 个元素的集合中的前 15 个元素中删除一个类的更有效(更快)的方法吗？

Answer 1

如果使用 .slice 将一组 3000 个元素减少到 15 个仍然太慢，那么您的性能瓶颈似乎不在于从集合中删除这 15 个元素，而是首先遍历 DOM 以构建初始的 3000 个元素集。

我可以建议的唯一实用方法是确保只生成该集合一次，然后根据所有后续操作的需要缓存和/或操作该对象:

var $hidden = $('li.hidden');   // do this once

function paginate() {
    $hidden.slice(0, 15).removeClass('hidden');
    $hidden = $hidden.slice(15);
    ...
}