javascript - 隐藏/显示多达 100 个 DOM 元素的最有效方法？

Question

假设您最多有 100 个元素，它们的类型和格式不会改变，但它们的上下文会改变。（它们基本上是行）
这些行绑定到输入并随着用户键入而改变。

获得最佳性能的最佳方法是什么？重用元素，除了改变它们的上下文之外保持不变？还要别的吗？

编辑，澄清：
搜索算法是不相关的，但我确实使用 MVVM (angularjs) 框架，所以我正在做的搜索是在 JavaScript 上并且不是瓶颈；得到结果后，我相应地更新。

此外，我不需要在 DOM 上搜索元素，我确实有对元素的引用，我想最小化更新期间的运行时间。

score 4 · Accepted Answer

对于代码，这会做，

$(element).css('display' , 'none');

但是性能问题取决于您如何找到这些元素， 关键是将元素包装到容器中，并仅在该容器中搜索元素：

$('container').find('your_elements').css('display' , 'none');

或者

$('your_elements', 'container').css('display' , 'none');

会做的。

永远不会做：

$('your_elements').css('display' , 'none');

JS 将不得不搜索整个 dom

score 2 · Accepted Answer

如果你只有 100 个元素，那并不重要。只需设置display其样式对象的属性即可显示或隐藏它们。

score 0 · Accepted Answer

0

使用所有行的唯一 id 并使用 jquery 通过更改它们的值来操作它。

于 2012-12-19T06:12:28.783 回答

score 0 · Accepted Answer

最好的方法是，将所有这些元素包装在一个 div 中并将样式设置为外部 div （假设它们像你说的那样在一起，它们是行）

<div id="wrapper">
   <!-- Your dom elements -->
</div>

为您的包装器 div 设置适当的样式。

通常我认为我们不需要担心这些事情的性能，因为它们是非常微不足道的操作。

score 0 · Accepted Answer

我认为创建一个不显示的 CSS 类并将该类应用于 TR 元素通过这样做，您将能够利用 jquery 选择器供以后使用。 $('TR.hidden') 和 if(!$('TD').hasClass('hidden'))

5 回答 5