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