How to hide/show multiple objects in Jquery?

I want to hide/show items and show them again if requested.

I am using the following code to do it. But it slows down the page if i do it few times.

for(i=0;i < 9; i++) 
  $('.myBetSingleBox').eq(i).css({'display':''});

Is there a way to do it without slowing down the page开发者_开发知识库? the for loop is slowing down the page, but i dont have another solution.

maybe is there a Garbage Collection possible in JQuery?

info: hide(), toggle() methods are worst then css({'display':''});

Thanks!

This will hide the first 9 elements with that class.

$('.myBetSingleBox:lt(8)').hide();

That situation you are describing (hiding 9 elements) as a bottleneck of your application sounds unlikely.

In order to make things faster, you have to cache your DOM references:

var boxes = $('.myBetSingleBox');

Then just:

boxes.slice(0, 8).hide();

and

boxes.slice(0, 8).show();

The above lines should take less than 1 ms (milliseconds) to execute, so they can't be the reason for your performance issues...

Make all of the elements you want to show children of a common element. Then, apply the css display property to that common element.