Question

I have a situation in a web application, where based on certain conditions, I have to hide or show large number of div elements, numbers ranging from say 500 to 98000

.

What I am doing is I am applying a common class on all the div elements and then iterating the whole set of elements to check whether or not they are fitting in the circumstances and hence are shown or hide.

This logic works fine when the numbers are say in the range of 500 to 10000, but above this range, it is taking quiet some good amount of time to display the result.

I am afraid for really large numbers, this logic may result in some browsers getting hanged.

So, what could be a better approach to handle the above mentioned situation, in most of the browsers

Answer 1

As Blazermonger said, you’re getting a poor performance because of the way you’re showing/hiding all those elements. Try adding them into a container and showing/hiding the container.

Also, keep in mind that calling show() and hide() directly is more expensive than callind .css(‘display’, ”) and .css(‘display’, ‘none’).

Last, please check Call show on array of jQuery objects