hide all div's (except first one) having same class

Question

I have 10 <div>'s with a same class

 <div class="c1"></div>
 <div class="c1"></div>
 <div class="c1"></div>
 <div class="c1"></div>
 <div class="c1"></div>
 <div class="c1"></div>
 <div class="c1"></div>
 <div class="c1"></div>
 <div class="c1"></div>
 <div class="c1"></div>

Now I need to hide all the <div> leaving first out.

Paul · Accepted Answer · 2011-08-01T07:44:26.180

17

This is the fastest way to do it: $('div.c1').not(':eq(0)').hide(); :)

edited Aug 01 '11 at 07:44

answered Aug 01 '11 at 07:14

Paul

139,544
27
275
264

@Brock Adams, Well jQuery docs say it's slower, but your :gt made me think of another method which is **much** faster according to your speed test. I added it as New way. I'll edit my post – Paul Aug 01 '11 at 07:37
@Brock Adams, actually when I test in FF 5 I get it the way the jQuery docs say as well. Maybe you just had a background task hog the CPU a little while you were testing or something. – Paul Aug 01 '11 at 07:42
@Brock right lol, oops. Of course that explains it haha. I fixed it now :) – Paul Aug 01 '11 at 07:45
Maybe so. I notice on other browsers, and on FF without all my AdBlock, etc. plugins, that your speed assertions are correct. Although the trivial speed differences are no reason to abandon the elegant beauty of my solution. (^_^) – Brock Adams Aug 01 '11 at 07:49
@Brock I agree, in the real world you rarely need to hide a div more than once, let alone thousands of times per second :P – Paul Aug 01 '11 at 07:52

score 1 · Answer 2 · edited Aug 18 '12 at 01:36

1

$('.c1').hide();
$('.c1:first').show();

edited Aug 18 '12 at 01:36

Lucas

16,930
31
110
182

answered Aug 01 '11 at 07:13

john

3,043
5
27
48

Brock Adams · Answer 3 · 2011-08-01T07:34:56.217

0

Another way:

$('div.c1:gt(0)').hide ();

Which is more flexible, if you decide to keep the 1st 2, for example.

Note that this is also 10% faster than the other answers, so far (in FF 5). See this performance test.

edited Aug 01 '11 at 07:34

answered Aug 01 '11 at 07:22

Brock Adams

90,639
22
233
295

score 0 · Answer 4 · answered Aug 01 '11 at 07:22

0

var elements = document.getElementsByTagName("div").getElementsByClassName("c1");
for (var i = 1; i < elements.length; i++)
{
    elements[i].style.visibility = "hidden";
}

I hope it works

answered Aug 01 '11 at 07:22

Emanuele Minotto

415
5
10

hide all div's (except first one) having same class

4 Answers4

Linked