jQuery select all except first
Question
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>
4 answers
solution1
560 ACCPTED 2010-02-13 22:45:13
$("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:
solution2
29 2015-01-18 11:11:35
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") :
eg
$("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".
solution3
3 2017-03-22 15:44:42
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>
We want to hide all
.childelements on every group. So this will not help because will hide all.childelements exceptvisible#1:$('.child:not(:first)').hide();The solution (in this extended case) will be:
$('.some-group').each(function(i,group){ $(group).find('.child:not(:first)').hide(); });
solution4
1 2017-10-25 05:20:59
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.