CODEWITHSUNDEEP
jqueryjquery-selectors
Ran
Ran

Reputation: 3533

jQuery selector - all but the first

I have a small jQuery selectors question, I have the following html:

<div class="member-info first"></div>
<div class="member-info"></div>
<div class="member-info"></div>

I want to hide (using jQuery) all the divs that holds the "member-info" class, but not the one holding the "first" class, any thoughts?

Upvotes: 9

Views: 12042

Answers (8)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93601

@AuthorProxy, @David Thomas and @Maximilian Ehlers all suggest $('.member-info').not('.first').hide(); in their answers which is a very fast, and very readable solution.

Because of the way jQuery selectors are evaluated right-to-left, the quite readable ".member-info:not(.first)" is actually slowed down by that evaluation.

A fast and easy to read solution is indeed using the function version .not(".first") or even just .not(":first"):

e.g.

$(".member-info").not(".first").hide();   // Class selector

or

$(".member-info").not(":first").hide();   // Positional selector

JSPerf of related selectors: http://jsperf.com/fastest-way-to-select-all-expect-the-first-one/6

.not(':first') is only few percentage points slower than slice(1), but is very readable as "I want all except the first one".

Upvotes: 0

AuthorProxy
AuthorProxy

Reputation: 8047

$(".member-info:not('.first')").hide();
$(".member-info").filter(":not('.first')").hide();
$('.member-info').not('.first').hide();

$(".member-info:not(:first)").hide();
$(".member-info").filter(":not(':first')").hide();
$('.member-info').not(':first').hide();

$(".member-info:not(:eq(0))").hide();
$(".member-info").filter(":not(':eq(0)')").hide();
$(".member-info").not(":eq(0)").hide();

$(".member-info:not(:lt(1))").hide();
$(".member-info").filter(":not(':lt(1)')").hide();
$(".member-info").not(":lt(1)").hide();

$(".member-info:gt(0)").hide();
$(".member-info").filter(':gt(0)').hide();

$(".member-info").slice(1).hide();

All possible ways that come to my mind. I also made JavaScript performance comparison where you can find some unexpectable results.

All of this samples work with v1.10.* of jQuery.

Most times this one is the fastest $(".member-info").slice(1).hide(); and looks like relevant, not brainstormed answer

Upvotes: 3

Travis J
Travis J

Reputation: 82297

I came across this issue as well. However, I did not conveniently have a class named first marking my element for exclusion. Here was the solution I used for the selector in the context of this example:

$('.member-info:not(:first)');//grab all .member-info except the first match

Upvotes: 1

Maximilian Ehlers
Maximilian Ehlers

Reputation: 328

how about $('.member-info').not('.first').hide();

Upvotes: 0

justkt
justkt

Reputation: 14766

Use the :not() selector. For example:

$(".member-info:not(first)").hide();

If first is really always the first child, try

$(".member-info:not(member-info:first)").hide();

Upvotes: 3

David Thomas
David Thomas

Reputation: 253396

This should work:

$('.member-info').not('.first').hide();

Using not().

Upvotes: 0

Jon
Jon

Reputation: 3520

This doesn't quite answer your question, but you could skip the first matched element using gt.

For example:

$('div.member-info:gt(0)')

See: http://api.jquery.com/gt-selector/

Upvotes: 2

user113716
user113716

Reputation: 322542

$('.member-info:not(.first)').hide();

This uses the not-selector(docs) to exclude elements with the first class.

Or if the purpose of the first class is simply to identify the first, then do this instead:

$('.member-info').slice(1).hide();

This uses the slice()(docs) method to return a set starting with the second match.

Upvotes: 16

Related Questions