name - jQuery seleccionar todo excepto primero
selectores jquery avanzados (4)
En jQuery, ¿cómo uso un selector para acceder a todos menos el primero de un elemento? Por lo tanto, en el siguiente código solo se accederá al segundo y tercer elemento. Sé que puedo acceder a ellos manualmente, pero podría haber cualquier número de elementos, por lo que no es posible. Gracias.
<div class=''test''></div>
<div class=''test''></div>
<div class=''test''></div>
Debido a la forma en que los selectores de jQuery se evalúan de derecha a izquierda , esa evaluación ralentiza el li:not(:first) es bastante legible.
Una solución igualmente rápida y fácil de leer es usar la versión de la función .not(":first") :
p.ej
$("li").not(":first").hide();
JSPerf: http://jsperf.com/fastest-way-to-select-all-expect-the-first-one/6
Esto es solo unos pocos puntos porcentuales más lento que el slice(1) , pero es muy legible como "Quiero todos excepto el primero".
Mi respuesta está enfocada a un caso extendido derivado del expuesto en la parte superior.
Supongamos que tiene un grupo de elementos de los que desea ocultar los elementos secundarios, excepto el primero. Como ejemplo:
<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>
Queremos ocultar todos los elementos
.childen cada grupo. Por lo tanto, esto no ayudará, ya que ocultará todos los elementos.childexcepto elvisible#1:$(''.child:not(:first)'').hide();La solución (en este caso extendido) será:
$(''.some-group'').each(function(i,group){ $(group).find(''.child:not(:first)'').hide(); });
$(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>
$("div.test:not(:first)").hide();
o:
$("div.test:not(:eq(0))").hide();
o:
$("div.test").not(":eq(0)").hide();
o:
$("div.test:gt(0)").hide();
o: (según el comentario de @Jordan Lev):
$("div.test").slice(1).hide();
y así.
Ver: