selectores name examples ejemplos child avanzados jquery jquery-selectors

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>

  1. Queremos ocultar todos los elementos .child en cada grupo. Por lo tanto, esto no ayudará, ya que ocultará todos los elementos .child excepto el visible#1 :

    $(''.child:not(:first)'').hide();

  2. 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>