jQuery nextAll()เมธอด
ตัวอย่าง
ส่งคืนองค์ประกอบพี่น้องถัดไปทั้งหมดของแต่ละองค์ประกอบ <li> ที่มีชื่อคลาส "start":
$(document).ready(function(){
$("li.start").nextAll().css({"color": "red", "border": "2px solid red"});
});
ผลลัพธ์:
ul (parent)
- li (sibling)
- li (sibling)
- li (sibling with class name "start")
- li (sibling)
- li (sibling)
- li (sibling)
ความหมายและการใช้งาน
nextAll() วิธีการส่งกลับองค์ประกอบพี่น้องถัดไปทั้งหมดขององค์ประกอบที่เลือก
องค์ประกอบพี่น้องเป็นองค์ประกอบที่มีผู้ปกครองคนเดียวกัน
แผนผัง DOM:วิธีการนี้จะข้ามไปข้างหน้าตามพี่น้องขององค์ประกอบ DOM
วิธีการที่เกี่ยวข้อง:
- next() - ส่งคืนองค์ประกอบพี่น้องถัดไปขององค์ประกอบที่เลือก
- nextUntil() - ส่งคืนองค์ประกอบพี่น้องถัดไปทั้งหมดระหว่างสองอาร์กิวเมนต์ที่กำหนด
ไวยากรณ์
$(selector).nextAll(filter)
| Parameter | Description |
|---|---|
| filter | Optional. Specifies a selector expression to narrow down the search for next siblings Note: To return multiple siblings, separate each expression with a comma. |
ลองด้วยตัวคุณเอง - ตัวอย่าง
วิธีกรองการค้นหาองค์ประกอบพี่น้องถัดไป
โดยใช้พารามิเตอร์ตัวกรองเพื่อรับข้อมูลพี่น้องทั้งหมดขององค์ประกอบ <h2> ที่มีชื่อคลาสเป็น "อันดับแรก" "ที่สอง" และ "ที่สาม"
วิธีเลือกองค์ประกอบพี่น้องถัดไปทั้งหมดขององค์ประกอบ <p>
วิธีเลือกองค์ประกอบย่อย <p> พี่น้องถัดไปทั้งหมดของแต่ละองค์ประกอบ <div>