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