309

In jQuery how do I use a selector to access all but the first of an element? So in the following code only the second and third element would be accessed. I know I can access them manually but there could be any number of elements so thats not possible. Thanks.

<div class='test'></div>
<div class='test'></div>
<div class='test'></div>
1

4 Answers 4

630
$("div.test:not(:first)").hide();

or:

$("div.test:not(:eq(0))").hide();

or:

$("div.test").not(":eq(0)").hide();

or:

$("div.test:gt(0)").hide();

or: (as per @Jordan Lev's comment):

$("div.test").slice(1).hide();

and so on.

See:

17
  • 21
    Here is a JsPerf comparing all those solutions: jsperf.com/fastest-way-to-select-all-expect-the-first-one Depending on the number of items, $("li").not(":eq(0)") seems good.
    – Damien
    Dec 19, 2012 at 15:41
  • 4
    love this list. Just wanted to add: $("div.test:first").siblings().hide(). Found it useful for me to start with the first element, then hide all of its siblings even if they aren't found with a common selector.
    – Levi
    Dec 20, 2012 at 20:01
  • 2
    Great list! Just a small comment though; I don't think gt is a JQuery function anymore, at least not in the version I use. I get a TypeError: .gt is not a function.
    – Dre
    May 13, 2015 at 15:42
  • 1
    $("div.test").slice(1).hide(); looks most forgiving in case of empty selection...
    – Frank N
    Mar 2, 2017 at 9:37
  • 1
    @SandyGifford wouldn't that include siblings that are not in the test class? And miss test-class elements that are not siblings?
    – Bob Stein
    Feb 3, 2018 at 19:29
37

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

An equally fast and easy to read solution is using the function version .not(":first"):

e.g.

$("li").not(":first").hide();

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

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

1
  • 1
    This is my favourite as well, I find it very clean and easy to read. The intent is unmistakable.
    – Dre
    May 13, 2015 at 15:45
4

My answer is focused to a extended case derived from the one exposed at top.

Suppose you have group of elements from which you want to hide the child elements except first. As an example:

<html>
  <div class='some-group'>
     <div class='child child-0'>visible#1</div>
     <div class='child child-1'>xx</div>
     <div class='child child-2'>yy</div>
  </div>
  <div class='some-group'>
     <div class='child child-0'>visible#2</div>
     <div class='child child-1'>aa</div>
     <div class='child child-2'>bb</div>
  </div>
</html>
  1. We want to hide all .child elements on every group. So this will not help because will hide all .child elements except visible#1:

    $('.child:not(:first)').hide();
    
  2. The solution (in this extended case) will be:

    $('.some-group').each(function(i,group){
        $(group).find('.child:not(:first)').hide();
    });
    
1

$(document).ready(function(){

  $(".btn1").click(function(){
          $("div.test:not(:first)").hide();
  });

  $(".btn2").click(function(){
           $("div.test").show();
          $("div.test:not(:first):not(:last)").hide();
  });

  $(".btn3").click(function(){
          $("div.test").hide();
          $("div.test:not(:first):not(:last)").show();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="btn1">Hide All except First</button>
<button class="btn2">Hide All except First & Last</button>
<button class="btn3">Hide First & Last</button>

<br/>

<div class='test'>First</div>
<div class='test'>Second</div>
<div class='test'>Third</div>
<div class='test'>Last</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.