jQuery Traversing - พี่น้อง
ด้วย jQuery คุณสามารถข้ามไปด้านข้างในแผนผัง DOM เพื่อค้นหาพี่น้องขององค์ประกอบ
พี่น้องร่วมบิดามารดาเดียวกัน
ข้ามไปด้านข้างใน The DOM Tree
มีเมธอด jQuery ที่เป็นประโยชน์มากมายสำหรับการข้ามไปด้านข้างในแผนผัง DOM:
siblings()next()nextAll()nextUntil()prev()prevAll()prevUntil()
พี่น้อง jQuery () วิธีการ
วิธี การsiblings()ส่งกลับองค์ประกอบพี่น้องทั้งหมดขององค์ประกอบที่เลือก
ตัวอย่างต่อไปนี้จะคืนค่าองค์ประกอบพี่น้องทั้งหมดของ<h2>:
ตัวอย่าง
$(document).ready(function(){
$("h2").siblings();
});
คุณยังสามารถใช้พารามิเตอร์ทางเลือกเพื่อกรองการค้นหาพี่น้อง
ตัวอย่างต่อไปนี้จะคืนค่าองค์ประกอบพี่น้องทั้งหมด<h2>ที่เป็น<p>
องค์ประกอบ:
ตัวอย่าง
$(document).ready(function(){
$("h2").siblings("p");
});
jQuery ถัดไป () เมธอด
วิธี การnext()ส่งกลับองค์ประกอบพี่น้องถัดไปขององค์ประกอบที่เลือก
ตัวอย่างต่อไปนี้จะคืนค่าพี่น้องตัวถัดไปของ<h2>:
ตัวอย่าง
$(document).ready(function(){
$("h2").next();
});
jQuery nextAll() เมธอด
วิธี การnextAll()ส่งกลับองค์ประกอบพี่น้องถัดไปทั้งหมดขององค์ประกอบที่เลือก
ตัวอย่างต่อไปนี้จะคืนค่าองค์ประกอบพี่น้องถัดไปทั้งหมดของ
<h2>:
ตัวอย่าง
$(document).ready(function(){
$("h2").nextAll();
});
jQuery nextUntil() Method
วิธี การnextUntil()ส่งกลับองค์ประกอบพี่น้องถัดไปทั้งหมดระหว่างสองอาร์กิวเมนต์ที่กำหนด
ตัวอย่างต่อไปนี้จะคืนค่าองค์ประกอบพี่น้องทั้งหมดระหว่าง a <h2>และ<h6>องค์ประกอบ:
ตัวอย่าง
$(document).ready(function(){
$("h2").nextUntil("h6");
});
jQuery prev(), prevAll() & prevUntil() Methods
prev(), และ เมธอดทำงาน prevAll()เหมือนกับprevUntil()วิธีการด้านบน แต่มีฟังก์ชันย้อนกลับ: ส่งคืนองค์ประกอบพี่น้องก่อนหน้า (ย้อนกลับตามองค์ประกอบพี่น้องในแผนผัง DOM แทนที่จะเป็นไปข้างหน้า)
แบบฝึกหัด jQuery
jQuery Traversing Reference
สำหรับภาพรวมที่สมบูรณ์ของวิธีการ jQuery Traversing ทั้งหมด โปรดไปที่ jQuery Traversing Referenceของเรา