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