CODEWITHSUNDEEP
phpjavascriptjquery
Racooon
Racooon

Reputation: 1496

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!

Upvotes: 0

Views: 336

Answers (3)

Šime Vidas
Šime Vidas

Reputation: 185963

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...

Upvotes: 1

alex
alex

Reputation: 490433

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.

Upvotes: 2

Jesufer Vn
Jesufer Vn

Reputation: 13750

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

Upvotes: 0

Related Questions