隐藏/显示多达100个DOM元素的最有效方法是什么？

Question

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

什么是最佳性能的最佳方法？ 重用这些元素，保持一切，但改变他们的背景？ 还要别的吗？

编辑，澄清：
搜索算法是无关的，但我确实使用MVVM（angularjs）框架，所以我正在进行的搜索是在JavaScript上，而不是瓶颈; 得到结果后，我相应地更新。

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

Answer 1

对于代码，这样做，

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

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

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

要么

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

会做的。

永远不会做：

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

JS将不得不搜索整个dom

Answer 2

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

Answer 3

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

Answer 4

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

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

为你的包装div设置合适的样式。

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

Answer 5

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