jQuery ilk hariç hepsini seç

272

JQuery'de bir öğenin ilkinin dışındaki tüm öğelere erişmek için bir seçiciyi nasıl kullanabilirim? Dolayısıyla, aşağıdaki kodda yalnızca ikinci ve üçüncü öğeye erişilirdi. Onlara elle erişebileceğimi biliyorum, ancak bu kadar mümkün olmayan çok sayıda öğe olabilir. Teşekkürler.

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

jquery jquery-selectors

— usertest
kaynak

Bu cevaba bakın stackoverflow.com/questions/4831334/…

— AuthorProxy

575

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

veya:

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

veya:

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

veya:

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

veya: (@Jordan Lev'nin yorumuna göre):

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

ve bunun gibi.

Görmek:

— karim79
kaynak

19

İşte tüm bu çözümleri karşılaştıran bir JsPerf: jsperf.com/fastest-way-to-select-all-expect-the-first-one Öğe sayısına bağlı olarak $("li").not(":eq(0)")iyi görünüyor.

— Damien

4

Bu listeyi seviyorum. Sadece eklemek istedim: $("div.test:first").siblings().hide(). İlk öğeyle başlamamı yararlı buldum, sonra ortak bir seçici ile bulunmasalar bile tüm kardeşlerini gizleyin.

— Levi

2

Harika bir liste! Sadece küçük bir yorum olsa; Ben gt en azından kullandığım sürümünde artık bir JQuery işlevi olduğunu sanmıyorum. TypeError alıyorum: .gt bir işlev değil.

— Dre

1

$("div.test").slice(1).hide();boş seçim durumunda en affedici görünüyor ...

— Frank Nocke

1

@SandyGifford, test sınıfında olmayan kardeşleri içermez mi? Ve kardeş olmayan test sınıfı unsurları mı kaçırıyorsunuz?

— Bob Stein

30

JQuery seçicilerinin sağdan sola değerlendirilme şekli nedeniyle oldukça okunabilirlik li:not(:first)bu değerlendirme ile yavaşlatılır.

Eşit derecede hızlı ve okunması kolay bir çözüm fonksiyon sürümünü kullanıyor .not(":first"):

Örneğin

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

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

Bu sadece yüzde birkaç puan daha yavaş slice(1), ama çok okunabilir "ilk hariç hepsini istiyorum".

— Gitti Kodlama
kaynak

1

Bu da benim favorim, çok temiz ve okunması kolay buluyorum. Niyet açıktır.

— Dre

3

Cevabım, üstte açıkta olandan türetilen genişletilmiş bir vakaya odaklanıyor.

İlk önce alt öğeleri gizlemek istediğiniz öğe grubunuz olduğunu varsayalım. Örnek olarak:

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

.childHer gruptaki tüm öğeleri gizlemek istiyoruz . Bu yardımcı olmaz çünkü aşağıdakiler .childdışındaki tüm öğeleri gizler visible#1:
```
$('.child:not(:first)').hide();
```

Çözüm (bu genişletilmiş durumda):

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

— Hristiyan
kaynak

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>

Snippet'i genişlet

— Rafiqul İslam
kaynak