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

Question

Assume that you have at most 100 elements in which their types and format don't change but their context does. (They're basically rows)
These rows around bound to a input and going to change as the user types.

What would be the best approach for maximum performance? Reusing the elements, keeping all but changing their context? Anything else?

Edit, Clarification:
The search algorithm is unrelated but I do use MVVM (angularjs) framework so the search I'm doing is on JavaScript and is not a bottleneck; after getting the results, I update the accordingly.

Also I don't need to search for the elements over DOM, I do have the references to elements, I want to minimize the run-time during the update.

Answer 1

For the code, this will do,

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

But the performance issues depends on how you are finding those elements, The key is to wrap elements in to a container, and search for the elements within that container only :

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

OR

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

Will do it.

Never do:

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

JS will have to search entire dom for that

Answer 2

If you have only 100 elements it doesn't really matter. Just set the display property of their style object to show or hide them.

Answer 3

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

Answer 4

Best way could be, wrap all those elements in a div and set style to the external div ( assuming they are together as you said they are rows )

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

Set proper style to your wrapper div.

And typically I dont think we need to worry about perf on such things as they are very trivial operations.

Answer 5

I think create a CSS class with display none and apply that class to TR elements by doing this you will be able to utilize the jquery selector for later use. $('TR.hidden') and if(!$('TD').hasClass('hidden'))