jQuery ทวนอากาศยาน - วิธี .next()

jQuery ทวนอากาศยานอ้างอิงคู่มือ

ตัวอย่าง

ค้นหาองค์ประกอบพี่น้องที่ตามมาของแต่ละ段落 และเลือกเฉพาะรายการที่มีคลาส "selected"

$("p");.next(".selected");.css("background", "yellow");

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

คำอธิบายและการใช้งาน

next() กู้องค์ประกอบพี่น้องที่อยู่ข้างหลังของแต่ละองค์ประกอบใน jQuery object ที่ตรงกับ ถ้ามีตัวแสดงความหมายเลือกตัวแทน ก็จะกู้องค์ประกอบพี่น้องตรงกับตัวแสดงความหมายเลือกตัวแทนนี้

รูปแบบ

.next(selector)
ตัวแปร รายละเอียด
selector ค่าของตัวอักษร มีตัวแสดงความหมายเลือกตัวแทนที่ใช้เพื่อตรวจสอบองค์ประกอบ

รายละเอียด

ถ้าให้ jQuery object ที่แสดงชุดขององค์ประกอบ DOM วิธี .next() อนุญาตให้เราค้นหาองค์ประกอบพี่น้องที่ตามมาขององค์ประกอบใน DOM tree และสร้าง jQuery object ใหม่ด้วยองค์ประกอบที่ตรงกับ

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

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

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

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

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

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

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

jQuery ทวนอากาศยานอ้างอิงคู่มือ