jQuery selecciona todo excepto primero

272

En jQuery, ¿cómo uso un selector para acceder a todos menos al primero de un elemento? Entonces, en el siguiente código, solo se accedería al segundo y tercer elemento. Sé que puedo acceder a ellos manualmente, pero podría haber cualquier cantidad de elementos, por lo que no es posible. Gracias.

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

jquery jquery-selectors

— prueba de uso
fuente

Mira esta respuesta stackoverflow.com/questions/4831334/…

— AuthorProxy

575

$("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:

— karim79
fuente

19

Aquí hay un JsPerf que compara todas esas soluciones: jsperf.com/fastest-way-to-select-all-expect-the-first-one Dependiendo del número de elementos, $("li").not(":eq(0)")parece bueno.

— Damien

44

Me encanta esta lista. Sólo quería añadir: $("div.test:first").siblings().hide(). Me pareció útil comenzar con el primer elemento, luego ocultar a todos sus hermanos, incluso si no se encuentran con un selector común.

— Levi

2

Gran lista! Sin embargo, solo un pequeño comentario; Ya no creo que gt sea una función JQuery, al menos no en la versión que uso. Me sale un TypeError: .gt no es una función.

— Dre

1

$("div.test").slice(1).hide();parece más indulgente en caso de selección vacía ...

— Frank Nocke

1

@SandyGifford, ¿eso no incluiría a hermanos que no están en la clase de prueba? ¿Y se pierden elementos de clase de prueba que no son hermanos?

— Bob Stein

30

Debido a la forma en que los selectores jQuery se evalúan de derecha a izquierda , li:not(:first)esa evaluación ralentiza bastante la lectura .

Una solución igualmente rápida y fácil de leer es usar la versión de 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 slice(1), pero es muy legible como "Quiero todos excepto el primero".

— Codificación ido
fuente

1

Este es mi favorito también, lo encuentro muy limpio y fácil de leer. La intención es inconfundible.

— Dre

3

Mi respuesta se centra en un caso extendido derivado del expuesto en la parte superior.

Supongamos que tiene un grupo de elementos del que desea ocultar los elementos secundarios, excepto 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 .childelementos en cada grupo. Entonces esto no ayudará porque ocultará todos los .childelementos excepto visible#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();
});

— cristiano
fuente

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>

Expandir fragmento

— Rafiqul Islam
fuente