1

我正在尝试实现分页解决方案，在该解决方案中，我只为所有项目查询服务器一次。这将返回 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 个元素中删除一个类的更有效（更快）的方法吗？

4

2 回答 2

4

如果使用.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);
    ...
}
于 2013-05-07T15:21:51.703 回答
0

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

$(this).parent().parent().find('li.hidden:lt(15)').removeClass("hidden")
于 2013-05-07T15:21:21.873 回答