jQuery เลือกทั้งหมดยกเว้นก่อน

272

ใน jQuery ฉันจะใช้ตัวเลือกเพื่อเข้าถึงทั้งหมดยกเว้นองค์ประกอบแรกได้อย่างไร ดังนั้นในรหัสต่อไปเท่านั้นที่จะเข้าถึงองค์ประกอบที่สองและสาม ฉันรู้ว่าฉันสามารถเข้าถึงได้ด้วยตนเอง แต่อาจมีองค์ประกอบจำนวนเท่าใดก็ได้ดังนั้นจึงเป็นไปไม่ได้ ขอบคุณ

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

jquery jquery-selectors

— usertest
แหล่งที่มา

ดูคำตอบนี้stackoverflow.com/questions/4831334/…

— แต่ง Proxy

575

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

หรือ:

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

หรือ:

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

หรือ:

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

หรือ: (ตามความคิดเห็นของ @Jordan Lev):

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

และอื่น ๆ

ดู:

— karim79
แหล่งที่มา

19

นี่คือ JsPerf เปรียบเทียบโซลูชันทั้งหมดเหล่านั้น: jsperf.com/fastest-way-to-select-all-expect-the-first-one ขึ้นอยู่กับจำนวนรายการที่$("li").not(":eq(0)")ดูเหมือนว่าดี

— ดาเมียน

4

รักรายการนี้ แค่อยากจะเพิ่ม: $("div.test:first").siblings().hide(). พบว่ามันมีประโยชน์สำหรับฉันที่จะเริ่มต้นด้วยองค์ประกอบแรกแล้วซ่อนพี่น้องทั้งหมดแม้ว่าจะไม่ได้พบกับตัวเลือกทั่วไป

— Levi

2

รายการที่ยอดเยี่ยม! เพียงแค่แสดงความคิดเห็นเล็ก ๆ น้อย ๆ ; ฉันไม่คิดว่า gt เป็นฟังก์ชั่น JQuery อีกต่อไปอย่างน้อยก็ไม่ใช่ในเวอร์ชันที่ฉันใช้ ฉันได้รับ TypeError: .gt ไม่ใช่ฟังก์ชัน

— Dre

1

$("div.test").slice(1).hide();รูปลักษณ์มากที่สุดให้อภัยในกรณีของการเลือกที่ว่างเปล่า ...

— แฟรงก์ Nocke

1

@Sandigifford จะไม่รวมถึงพี่น้องที่ไม่ได้อยู่ในชั้นทดสอบ? และคิดถึงองค์ประกอบของคลาสทดสอบที่ไม่ใช่พี่น้องเหรอ?

— Bob Stein

30

เนื่องจากวิธีการเลือกตัวเลือก jQuery ได้รับการประเมินจากขวาไปซ้ายการอ่านที่ค่อนข้างli:not(:first)จะถูกทำให้ช้าลงโดยการประเมินนั้น

โซลูชันที่อ่านง่ายและรวดเร็วไม่แพ้กันคือการใช้รุ่นฟังก์ชั่น.not(":first"):

เช่น

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

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

นี่เป็นเพียงไม่กี่เปอร์เซ็นต์ที่ช้ากว่าslice(1)แต่สามารถอ่านได้มากว่า "ฉันต้องการทั้งหมดยกเว้นคนแรก"

— ไปแล้วการเข้ารหัส
แหล่งที่มา

1

นี่คือสิ่งที่ฉันชอบเช่นกันฉันคิดว่ามันสะอาดและอ่านง่าย เจตนาไม่ผิดพลาด

— Dre

3

คำตอบของฉันมุ่งเน้นไปที่กรณีที่ขยายออกมาจากคดีที่อยู่ด้านบน

สมมติว่าคุณมีกลุ่มองค์ประกอบที่คุณต้องการซ่อนองค์ประกอบย่อยยกเว้นก่อน ตัวอย่างเช่น:

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

เราต้องการซ่อน.childองค์ประกอบทั้งหมดในทุกกลุ่ม ดังนั้นสิ่งนี้จะไม่ช่วยเพราะจะซ่อน.childองค์ประกอบทั้งหมดยกเว้นvisible#1:
```
$('.child:not(:first)').hide();
```
การแก้ปัญหา (ในกรณีที่ขยายนี้) จะเป็น:
```
$('.some-group').each(function(i,group){
    $(group).find('.child:not(:first)').hide();
});
```

— คริสเตียน
แหล่งที่มา

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>

ขยายตัวอย่างข้อมูล

— Rafiqul Islam
แหล่งที่มา