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集，并且使用slice运算符返回单个元素根本不是更好的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); ... }

Answer 2

使用less than选择器，请参阅http://api.jquery.com/lt-selector/

$(this).parent().parent().find('li.hidden:lt(15)').removeClass("hidden")

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

2 个答案: