jQuery seleciona todos, exceto primeiro

272

No jQuery, como uso um seletor para acessar todos, exceto o primeiro de um elemento? Portanto, no código a seguir, apenas o segundo e o terceiro elemento seriam acessados. Eu sei que posso acessá-los manualmente, mas pode haver qualquer número de elementos, portanto, isso não é possível. Obrigado.

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

jquery jquery-selectors

— usertest
fonte

Veja esta resposta stackoverflow.com/questions/4831334/…

— AuthorProxy

575

$("div.test:not(:first)").hide();

ou:

$("div.test:not(:eq(0))").hide();

ou:

$("div.test").not(":eq(0)").hide();

ou:

$("div.test:gt(0)").hide();

ou: (conforme comentário de @Jordan Lev):

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

e assim por diante.

Vejo:

— karim79
fonte

19

Aqui está um JsPerf comparando todas essas soluções: jsperf.com/fastest-way-to-select-all-expect-the-first-one Dependendo do número de itens, $("li").not(":eq(0)")parece bom.

— 21412 Damien

4

amo esta lista. Só queria acrescentar: $("div.test:first").siblings().hide(). Achei útil começar com o primeiro elemento e depois ocultar todos os seus irmãos, mesmo que não tenham sido encontrados com um seletor comum.

— Levi

2

Ótima lista! Apenas um pequeno comentário; Eu não acho que gt é mais uma função JQuery, pelo menos não na versão que eu uso. Eu recebo um TypeError: .gt não é uma função.

— Dre

1

$("div.test").slice(1).hide();olhares mais perdoando em caso de seleção vazia ...

— Frank Nocke

1

@SandyGifford não incluiria irmãos que não estão na classe de teste? E sente falta dos elementos da classe de teste que não são irmãos?

— Bob Stein

30

Devido à maneira como os seletores do jQuery são avaliados da direita para a esquerda , a legibilidade li:not(:first)é mais lenta nessa avaliação.

Uma solução igualmente rápida e fácil de ler está usando a versão da função .not(":first"):

por exemplo

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

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

Isso é apenas alguns pontos percentuais mais lentos do que slice(1) , mas é muito legível como "Quero tudo, exceto o primeiro".

— Gone Coding
fonte

1

Este é o meu favorito também, acho muito limpo e fácil de ler. A intenção é inconfundível.

— Dre

3

Minha resposta está focada em um caso extenso derivado do exposto no topo.

Suponha que você tenha um grupo de elementos dos quais deseja ocultar os elementos filhos, exceto primeiro. Como um exemplo:

<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 os .childelementos em cada grupo. Portanto, isso não ajudará porque ocultará todos os .childelementos, exceto visible#1:
```
$('.child:not(:first)').hide();
```

A solução (neste caso estendido) será:

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

— cristão
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>

Expandir snippet

— Rafiqul Islam
fonte