The most efficient way to hide/show up to 100 DOM elements?

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.