jQuery children()วิธีการ
ตัวอย่าง
ส่งคืนองค์ประกอบที่เป็นลูกโดยตรงของ <ul>:
$(document).ready(function(){
$("ul").children().css({"color": "red", "border": "2px solid red"});
});
ผลลัพธ์:
body (great-grandparent)
div (grandparent)
ul (parent)
- li (child)
span (grandchild)
ความหมายและการใช้งาน
เด็ก () วิธีการส่งกลับลูกโดยตรงทั้งหมดขององค์ประกอบที่เลือก
แผนผัง DOM:วิธีนี้จะข้ามระดับเดียวเท่านั้นจากแผนผัง DOM หากต้องการสำรวจหลายระดับ (เพื่อส่งคืนหลานหรือลูกหลานอื่น ๆ ) ให้ใช้เมธอด find()
เคล็ดลับ:หากต้องการข้ามระดับเดียวขึ้นไปบนทรี DOM หรือไปจนถึงองค์ประกอบรูทของเอกสาร (เพื่อส่งคืนพาเรนต์หรือบรรพบุรุษอื่นๆ) ให้ใช้ เมธอดparent()หรือ parent( )
หมายเหตุ:เมธอดนี้ไม่ส่งคืนโหนดข้อความ หากต้องการส่งคืนชายน์ทั้งหมดรวมถึงโหนดข้อความ ให้ใช้เมธอดcontent()
ไวยากรณ์
$(selector).children(filter)
| Parameter | Description |
|---|---|
| filter | Optional. Specifies a selector expression to narrow down the search for children |
ลองด้วยตัวคุณเอง - ตัวอย่าง
วิธีคืนค่าลูกโดยตรงทั้งหมดขององค์ประกอบ <ul>
วิธีใช้พารามิเตอร์ตัวกรองเพื่อส่งคืนองค์ประกอบ <li> ทั้งหมดที่มีชื่อคลาส "ก่อน" ซึ่งเป็นลูกโดยตรงของ <ul>
วิธีเลือกองค์ประกอบ <p> ทั้งหมดที่เป็นลูกโดยตรงขององค์ประกอบหลัก <div>
การสาธิตที่แสดงว่าผู้สืบทอดขององค์ประกอบ <div> เป็นใคร