Question

I have hundreds of elements on a page that share a class, and I need to optimize the application jQuery Toggle() to keep my browser from locking up when applying the function as follows:

$j('.textDate').toggle() //this locks up this browser

Clicking this function causes the browser to lock up and freeze — so I’ve tried to break it into a loop and run the function on each element individually and than I need to figure out some timeout/breaking up of the array to keep the browser from freezing:

$j('#showDatesCheckbox').click(function(){
    var textdate = $j('.textDate'); //1000+ elements
    for(var i = 0; i < textdate.length; i++)
    {
          $j(textdate[i]).toggle();
    }
});

This still doesn’t work though?

Answer 1

Just as a question.

What about var $textDates = $('.textDate'); to cache the results.

Then, later you can call $textDates.addClass('hidden');

The cached list should make the subsequent operations faster to implement.

I’ve added a jsFiddle.net one to play with: http://jsfiddle.net/cRRcC/2/

This adds 30,000 elements to the page (divs) and then gives you a link to hide them.

This seems to take less than a second this way. Would something of this order help you?

Thanks,
AE