隐藏数千个 <li> 元素的最快方法？

Question

我有一个自动完成表单，用户可以在其中输入一个术语，它会隐藏所有不包含该术语的 <li> 元素。

我最初使用 jQuery 的 each 遍历所有 <li> 并将 .hide() 应用于不包含该术语的那些。这太慢了。

我发现一种更快的方法是遍历所有<li> 并将.hidden 类应用于所有需要隐藏的部分，然后在循环结束时执行$('.hidden').hide()。不过，这感觉有点骇人听闻。

一种可能更快的方法可能是使用document.styleSheets 重写.hidden 类的CSS 规则。谁能想到更好的办法？

编辑：让我澄清一些我不确定太多人知道​​的事情。如果您在循环的每次迭代中更改 DOM，并且该更改会导致页面被重绘，那么这将比“准备”所有更改并在循环完成时立即应用它们要慢得多。

Answer 1

我知道这是个老问题，但我对任何答案都不满意。目前我正在开发一个使用 jQuery Selectable 列表的 Youtube 项目，该列表包含大约 120.000 个项目。这些列表可以按文本过滤，然后显示相应的项目。隐藏所有不匹配元素的唯一可接受的方法是先隐藏 ul 元素，而不是隐藏 li 元素并再次显示 list(ul) 元素。

Answer 2

您可以使用更独特的技术，在技术上不使用 JavaScript 来进行实际隐藏，方法是将数据副本放入属性中，并使用 CSS 属性选择器。

例如，如果术语是 secret，并且您将数据的副本放在 data-term 属性中，则可以使用以下 CSS：

li[data-term*="secret"] {
    display: none;
}

要动态执行此操作，您必须在 javascript 中向头部添加样式：

function hideTerm(term) {
    css = 'li[data-term*="'+term+'"]{display:none;}'
    style = $('<style type="text/css">').text(css)
    $('head').append(style);
}

如果您要这样做，您需要确保在停止使用样式标签时清理它们。

这可能是最快的，因为 CSS 选择在现代浏览器中非常快。很难进行基准测试，所以我不能肯定。

Answer 3

当您处理数千个项目时，DOM 操作会很慢。循环遍历许多 DOM 元素并根据元素的特征来操作每个元素通常不是一个好主意，因为这涉及在每次迭代中对 DOM 方法的大量调用。如您所见，它真的很慢。

更好的方法是将您的 数据 与 DOM 分开。在 JS 字符串数组中搜索要快几个数量级。

这可能意味着将您的数据集加载为 JSON 对象。如果这不是一个选项，您可以循环一次<li>s（在页面加载时），然后将数据复制到一个数组中。

现在您的数据集不依赖于存在的 DOM 元素，您可以在每次用户键入时使用 .html() 简单地替换 <ul> 的全部内容。 （这比 JS DOM 操作要快得多，因为只需更改 innerHTML，浏览器就可以优化 DOM 更改。）

var dataset = ['term 1', 'term 2', 'something else', ... ];

$('input').keyup(function() {
    var i, o = '', q = $(this).val();
    for (i = 0; i < dataset.length; i++) {
        if (dataset[i].indexOf(q) >= 0) o+='<li>' + dataset[i] + '</li>';
    }
    $('ul').html(o);
});

As you can see，这个速度非常快。

---

但是，请注意，如果您使用up it to 10,000 items，则在前几次击键时性能开始下降。这与插入到 DOM 中的结果数量有关，而不是与正在搜索的原始项目数量有关。 （随着您键入的内容越多，要显示的结果越少，性能也很好——即使它仍在搜索所有 10,000 个项目。）

为避免这种情况，我会考虑将显示的结果数量限制在一个合理的范围内。 （1,000 似乎和任何一样好。）这是自动完成；没有人真正查看所有结果 - 他们将继续输入，直到结果集可供人类管理。

Answer 4

不用重新定义 Stylesheets 规则，你可以直接定义 'hide' 类属性为“显示：无；”在您的页面之前，您可以 通过javascript验证条件后应用您定义的类， 如下所示。

$("li").each(function(){if(condition){$(this).addClass('hide');}});

以后，如果你想再次显示那些 li，你可以像下面这样删除类

$("li").each(function(){if(condition){$(this).removeClass('hide');}});

Answer 5

您可以使用 jQuery contains() 选择器查找列表中具有特定文本的所有项目，然后将其隐藏，如下所示：

HTML：

 <ul id="myList">
      <li>this</li>
      <li>that</li>
 <ul>​

jQuery

var term = 'this';    
$('li:contains("' + term + '")').hide();​

Answer 6

怎么样：

<style>
    .hidden{ display: none; }
</style>

这样您就不必使用 $('.hidden').hide() 进行额外的查询？

Answer 7

您可以直接选择所有

，然后过滤它们：$("li").filter(function(){...}).hide()（见here）

（对不起，我之前发错了）