jQuery pilih semua kecuali yang pertama

272

Di jQuery bagaimana cara menggunakan pemilih untuk mengakses semua kecuali elemen pertama? Jadi dalam kode berikut hanya elemen kedua dan ketiga yang akan diakses. Saya tahu saya bisa mengaksesnya secara manual tetapi mungkin ada sejumlah elemen jadi itu tidak mungkin. Terima kasih.

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

jquery jquery-selectors

— usertest
sumber

Lihat jawaban ini stackoverflow.com/questions/4831334/…

— AuthorProxy

575

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

atau:

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

atau:

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

atau:

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

atau: (sesuai komentar @Jordan Lev):

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

dan seterusnya.

Lihat:

— karim79
sumber

19

Berikut ini adalah JsPerf yang membandingkan semua solusi tersebut: jsperf.com/fastest-way-to-select-all-expect-the-first-one Tergantung pada jumlah item, $("li").not(":eq(0)")tampaknya baik.

— Damien

4

suka daftar ini. Hanya ingin menambahkan: $("div.test:first").siblings().hide(). Merasa bermanfaat bagi saya untuk memulai dengan elemen pertama, lalu sembunyikan semua saudara kandungnya meskipun mereka tidak ditemukan dengan pemilih umum.

— Lewi

2

Daftar hebat! Hanya sebuah komentar kecil; Saya tidak berpikir gt adalah fungsi JQuery lagi, setidaknya tidak dalam versi yang saya gunakan. Saya mendapatkan TypeError: .gt bukan fungsi.

— Dre

1

$("div.test").slice(1).hide();terlihat paling memaafkan dalam hal seleksi kosong ...

— Frank Nocke

1

@ SandyGifford bukankah itu termasuk saudara kandung yang tidak ada di kelas ujian? Dan ketinggalan elemen kelas uji yang bukan saudara kandung?

— Bob Stein

30

Karena cara penyeleksi jQuery dievaluasi dari kanan ke kiri , cukup mudah dibaca li:not(:first)diperlambat oleh evaluasi itu.

Solusi yang sama cepat dan mudah dibaca menggunakan versi fungsi .not(":first"):

misalnya

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

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

Ini hanya beberapa poin persentase lebih lambat daripada slice(1), tetapi sangat mudah dibaca sebagai "Saya ingin semua kecuali yang pertama".

— Goding Coding
sumber

1

Ini juga favorit saya, saya merasa sangat bersih dan mudah dibaca. Tujuannya tidak salah lagi.

— Dre

3

Jawaban saya terfokus pada kasus panjang yang berasal dari kasus yang terlihat di atas.

Misalkan Anda memiliki sekelompok elemen dari mana Anda ingin menyembunyikan elemen anak kecuali pertama. Sebagai contoh:

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

Kami ingin menyembunyikan semua .childelemen di setiap grup. Jadi ini tidak akan membantu karena akan menyembunyikan semua .childelemen kecuali visible#1:
```
$('.child:not(:first)').hide();
```

Solusinya (dalam kasus yang diperluas ini) adalah:

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

— Kristen
sumber

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>

Luaskan cuplikan

— Rafiqul Islam
sumber