การใช้งาน closest() ใน jquery

การทำงานของ closest() จะเหมือนกับการทำงานของ function parents (ไม่ใช่ parent เฉยๆนะ เพราะจะหาแค่ ชั้นบนที่ติดตัวชั้นเดียวเท่านั้น เพราะ parent จริงๆแล้วหมายถึงพ่อแม่ ไม่รวมปู่กับย่า) แต่จะต่างกันตรงที่ถ้าใช้ parents() จะหาเฉพาะ ชั้นที่เป็นแม่ของมันเท่านั้น แต่จะไม่ได้สนใจว่า element ปัจจุบันนั้นเป็นอะไร แต่ถ้าเป็น closest() จะทำการเปรียบเทียบตัวมันเองก่อนแล้วถึงจะมองขึ้นไปยังแม่ของ element นั้นๆอีกที โดยที่ function closest() นั้นจะทำการ return element ที่มันต้องการเพียงแค่ element เดียวเท่านั้น

ตัวอย่าง

ถ้าเราอยากได้ parent ตัวแรกสุดที่เป็น ul ของ span ให้เขียนแบบนี้

การทำงานจะเริ่มจากการหา span แลัวไล่จาก span ขึ้นไปเรื่อยๆ จนกระทั่งเจอ ul แล้วก็หยุดทำงาน แต่ถ้า element ที่เราทำการเลือกใน selector เป็น ul อยู่แล้วก็จะไม่ได้ทำการค้นหาอะไรแล้วก็ return element ปัจจุบันออกไป

แล้วกรณีไหนที่ต้องการใช้งาน closest() เพราะปกติเราจะใช้ parents กันอยู่แล้ว คำตอบคือใช้ในกรณีที่ต้องการหาตัวแม่เพียงตัวเดียวเท่านั้น เพราะเมื่อเจอแล้วก็จะหยุดค้นหา แต่ถ้าเราเปลี่ยน code ใหม่เป็น parents แบบนี้

ผลลัพธ์ที่ได้คือ ul ทั้ง 2 level จะมีกรอบสีแดงทั้ง 2 element

รับเขียนโปรแกรมและสอนเขียนโปรแกรมด้วย PHP
ติดต่อสอบถามรายละเอียดเพิ่มเติมได้ที่ 062-419-9498
หรือ E-mail: training@irobust.co.th

Leave a Reply

Your email address will not be published. Required fields are marked *