การทำงานของ closest() จะเหมือนกับการทำงานของ function parents (ไม่ใช่ parent เฉยๆนะ เพราะจะหาแค่ ชั้นบนที่ติดตัวชั้นเดียวเท่านั้น เพราะ parent จริงๆแล้วหมายถึงพ่อแม่ ไม่รวมปู่กับย่า) แต่จะต่างกันตรงที่ถ้าใช้ parents() จะหาเฉพาะ ชั้นที่เป็นแม่ของมันเท่านั้น แต่จะไม่ได้สนใจว่า element ปัจจุบันนั้นเป็นอะไร แต่ถ้าเป็น closest() จะทำการเปรียบเทียบตัวมันเองก่อนแล้วถึงจะมองขึ้นไปยังแม่ของ element นั้นๆอีกที โดยที่ function closest() นั้นจะทำการ return element ที่มันต้องการเพียงแค่ element เดียวเท่านั้น
ตัวอย่าง
|
1 2 3 4 5 6 7 8 9 10 |
/// ตัวอย่าง HTML <div style="width:500px;">div (great-grandparent) <ul>ul (second ancestor - second grandparent) <ul>ul (first ancestor - first grandparent) <li>li (direct parent) <span>span</span> </li> </ul> </ul> </div> |
ถ้าเราอยากได้ parent ตัวแรกสุดที่เป็น ul ของ span ให้เขียนแบบนี้
|
1 2 |
/// ทำการกำหนดกรอบสีแดงให้กับ ul ที่เป็น parent ตัวแรกที่หาเจอ $("span").closest("ul").css({"color": "red", "border": "2px solid red"}); |
การทำงานจะเริ่มจากการหา span แลัวไล่จาก span ขึ้นไปเรื่อยๆ จนกระทั่งเจอ ul แล้วก็หยุดทำงาน แต่ถ้า element ที่เราทำการเลือกใน selector เป็น ul อยู่แล้วก็จะไม่ได้ทำการค้นหาอะไรแล้วก็ return element ปัจจุบันออกไป
แล้วกรณีไหนที่ต้องการใช้งาน closest() เพราะปกติเราจะใช้ parents กันอยู่แล้ว คำตอบคือใช้ในกรณีที่ต้องการหาตัวแม่เพียงตัวเดียวเท่านั้น เพราะเมื่อเจอแล้วก็จะหยุดค้นหา แต่ถ้าเราเปลี่ยน code ใหม่เป็น parents แบบนี้
|
1 2 |
/// ทำการกำหนดกรอบสีแดงให้กับ ul ที่เป็น parent ตัวแรกที่หาเจอ $("span").parents("ul").css({"color": "red", "border": "2px solid red"}); |
ผลลัพธ์ที่ได้คือ ul ทั้ง 2 level จะมีกรอบสีแดงทั้ง 2 element
รับเขียนโปรแกรมและสอนเขียนโปรแกรมด้วย PHPติดต่อสอบถามรายละเอียดเพิ่มเติมได้ที่ 062-419-9498
หรือ E-mail: training@irobust.co.th