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