jQuery chọn tất cả ngoại trừ đầu tiên

272

Trong jQuery, làm cách nào để sử dụng bộ chọn để truy cập tất cả trừ phần tử đầu tiên? Vì vậy, trong đoạn mã sau chỉ có phần tử thứ hai và thứ ba sẽ được truy cập. Tôi biết tôi có thể truy cập chúng theo cách thủ công nhưng có thể có bất kỳ số lượng phần tử nào không thể thực hiện được. Cảm ơn.

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

jquery jquery-selectors

— mạnh mẽ nhất
nguồn

Hãy xem câu trả lời này stackoverflow.com/questions/4831334/ từ

— AuthorProxy

575

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

hoặc là:

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

hoặc là:

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

hoặc là:

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

hoặc: (theo nhận xét của @Jordan Lev):

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

và như thế.

Xem:

— karim79
nguồn

19

Dưới đây là một JsPerf so sánh tất cả các giải pháp đó: jsperf.com/fastest-way-to-select-all-recect-the-first-one Tùy thuộc vào số lượng mặt hàng, $("li").not(":eq(0)")có vẻ tốt.

— Damien

4

thích danh sách này. Chỉ muốn thêm : $("div.test:first").siblings().hide(). Tìm thấy nó hữu ích cho tôi để bắt đầu với phần tử đầu tiên, sau đó ẩn tất cả anh chị em của nó ngay cả khi chúng không được tìm thấy với một bộ chọn chung.

— Levi

2

Danh sách tuyệt vời! Chỉ là một bình luận nhỏ; Tôi không nghĩ gt là một hàm JQuery nữa, ít nhất là không phải trong phiên bản tôi sử dụng. Tôi nhận được TypeError: .gt không phải là một hàm.

— Dre

1

$("div.test").slice(1).hide();có vẻ tha thứ nhất trong trường hợp lựa chọn trống rỗng ...

— Frank Nocke

1

@SandyGifford sẽ không bao gồm anh chị em không thuộc lớp kiểm tra? Và bỏ lỡ các yếu tố lớp kiểm tra mà không phải là anh em ruột thịt?

— Bob Stein

30

Do cách các bộ chọn jQuery được đánh giá từ phải sang trái , khá dễ đọc li:not(:first)bị làm chậm bởi đánh giá đó.

Một giải pháp nhanh và dễ đọc không kém là sử dụng phiên bản chức năng .not(":first"):

ví dụ

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

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

Điều này chỉ chậm hơn vài phần trăm so với slice(1), nhưng rất dễ đọc là "Tôi muốn tất cả ngoại trừ cái đầu tiên".

— Mã hóa đã qua
nguồn

1

Đây là yêu thích của tôi là tốt, tôi thấy nó rất sạch sẽ và dễ đọc. Ý định là không thể nhầm lẫn.

— Dre

3

Câu trả lời của tôi tập trung vào một trường hợp mở rộng xuất phát từ một trường hợp được phơi bày ở trên cùng.

Giả sử bạn có nhóm các yếu tố mà bạn muốn ẩn các yếu tố con ngoại trừ đầu tiên. Ví dụ:

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

Chúng tôi muốn ẩn tất cả các .childyếu tố trên mỗi nhóm. Vì vậy, điều này sẽ không giúp ích vì sẽ ẩn tất cả các .childyếu tố ngoại trừ visible#1:
```
$('.child:not(:first)').hide();
```

Giải pháp (trong trường hợp mở rộng này) sẽ là:

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

— christian
nguồn

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>

Mở rộng đoạn trích

— Hồi giáo Hồi giáo
nguồn