jQuery คู่มือเลือกเลื่อน - วิธี nextAll()

jQuery คู่มือเลือกเลื่อน

ตัวอย่าง

ค้นหาคลาสที่ตามมาหลัง div แรกและเพิ่มคลาสส์เหล่านั้น

$("div:first").nextAll().addClass("after");

ลองทดลองด้วยตัวเอง

การนิยามและการใช้งาน

nextAll() ได้หาองค์ประกอบที่ตรงกันข้ามของแต่ละองค์ประกอบในชุดที่ตรงกันข้ามที่ตรงกันข้าม และการตรวจสอบด้วยตัวแทนเลือกเลื่อนเป็นที่เลือก

รูปแบบ

.nextAll(selector)
ประกาศ รายละเอียด
selector ค่าตัวแปรของตัวเลข ที่มีตัวแทนเลือกเลื่อนสำหรับการตรวจสอบองค์ประกอบ

รายละเอียด

หากมีตัวแทน jQuery ที่แสดงโครงสร้าง DOM ซึ่งเป็นชุดสมาชิก DOM ซึ่ง .nextAll() วิธีอนุญาตให้เราค้นหาองค์ประกอบพี่น้องที่ตามมาในต้นไม้ DOM และสร้างตัวแทน jQuery ใหม่ด้วยองค์ประกอบที่ตรงกันข้าม

วิธีนี้ยอมรับตัวแทนเลือกเลื่อนที่เป็นทั้งที่เลือกได้ โดยมีชนิดเหมือนกับที่เราส่งมายังฟังก์ชัน $() ถ้าใช้ตัวแทนเลือกเลื่อน จะตรวจสอบว่าองค์ประกอบตรงกันข้ามกับเลือกก่อนที่จะรวมเข้ามา

คิดถึงหน้าเว็บที่มีรายการรายชื่อที่เรียบง่ายนี้

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

หากเราเริ่มจากโครงการที่สาม นั้นเราสามารถหาองค์ประกอบที่มาหลังโครงการนั้นได้

$('li.third-item').nextAll().css('background-color', 'red');

ลองทดลองด้วยตัวเอง

ผลลัพธ์การเรียกใช้ครั้งนี้คือ โครงการ 4 และ 5 ถูกกำหนดเป็นสีพื้นหลังแดง。เนื่องจากเราไม่ได้ใช้ตัวแทนเลือกเลื่อน องค์ประกอบที่ตามมาโดยตรงมีความชัดเจนว่าถูกรวมเข้ามาเป็นส่วนหนึ่งขององค์ประกอบตัวเดียวกัน。หากเราได้ใช้ตัวแทนเลือกเลื่อน จะตรวจสอบว่ามีการตรงกันข้ามกับเลือกก่อนที่จะรวมเข้ามา

jQuery คู่มือเลือกเลื่อน