jQuery seleziona tutto tranne il primo

272

In jQuery come posso usare un selettore per accedere a tutti tranne il primo di un elemento? Pertanto, nel codice seguente è possibile accedere solo al secondo e al terzo elemento. So che posso accedervi manualmente ma potrebbero esserci un numero qualsiasi di elementi, quindi ciò non è possibile. Grazie.

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

jquery jquery-selectors

— UserTest
fonte

Guardate questa risposta 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();

oppure: (come da commento di @Jordan Lev):

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

e così via.

Vedere:

— karim79
fonte

19

Ecco un JsPerf che confronta tutte queste soluzioni: jsperf.com/fastest-way-to-select-all-expect-the-first-one A seconda del numero di articoli, $("li").not(":eq(0)")sembra buono.

— Damien,

4

amo questo elenco. Volevo solo aggiungere: $("div.test:first").siblings().hide(). Mi è stato utile iniziare con il primo elemento, quindi nascondere tutti i suoi fratelli anche se non sono stati trovati con un selettore comune.

— Levi,

2

Ottima lista! Solo un piccolo commento però; Non credo che gt sia più una funzione di JQuery, almeno non nella versione che uso. Ottengo un TypeError: .gt non è una funzione.

— Dre,

1

$("div.test").slice(1).hide();sembra più indulgente in caso di selezione vuota ...

— Frank Nocke

1

@SandyGifford non includerebbe i fratelli che non sono nella classe di test? E perdere elementi di classe test che non sono fratelli?

— Bob Stein,

30

A causa del modo in cui i selettori jQuery vengono valutati da destra a sinistra , la lettura li:not(:first)è rallentata da tale valutazione.

Una soluzione altrettanto veloce e di facile lettura sta usando la versione della funzione .not(":first"):

per esempio

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

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

Questo è solo di alcuni punti percentuali più lento di slice(1), ma è molto leggibile come "Voglio tutto tranne il primo".

— Codifica andata
fonte

1

Anche questo è il mio preferito, lo trovo molto pulito e di facile lettura. L'intenzione è inconfondibile.

— Dre,

3

La mia risposta è focalizzata su un caso esteso derivato da quello esposto in alto.

Supponiamo di avere un gruppo di elementi da cui si desidera nascondere gli elementi figlio tranne prima. Come esempio:

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

Vogliamo nascondere tutti gli .childelementi di ogni gruppo. Quindi questo non aiuterà perché nasconderà tutti gli .childelementi tranne visible#1:
```
$('.child:not(:first)').hide();
```

La soluzione (in questo caso esteso) sarà:

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

— cristiano
fonte

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>

Espandi frammento

— Rafiqul Islam
fonte