การใช้งาน 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

การสร้าง Event ใน JavaScript

ในการทำงานเขียนเว็บจำเป็นต้องรู้เรื่องของ JavaScript เพื่อให้ หน้าเว็บของเราสามารถ Interact กับผู้ใช้งานได้ดี สิ่งที่หลีกเลี่ยงไม่ได้คือ การแทรก Event เข้าไปใน DOM Element เช่นการแทรก Event onclick เข้าไปใน ปุ่ม หรือ onmouseover ให้กับรูปภาพ โดยมีหลายวิธี ดังนี้

การ Bind Event โดย การกำหนด Attribute ให้กับ Element นั้นๆ เช่น

การ Bind Event ด้วยวิธีนี้มีข้อเสียหลายอย่าง

  • ส่วนที่เป็น JavaScript เข้ามาปะปนกับ HTML
  • ไม่สามารถแก้ไขชื่อ function ได้ เนื่องจากเราไม่รู้ว่ามี DOM Element ไหนที่เรียกใช้ function นี้บ้าง
  • เราจะไม่รู้ว่า function ไหนเป็น function ธรรมดา หรือเป็น Event กันแน่

นอกจากวิธีนี้แล้วเรายังมีวิธีในการ Bind Event แบบ JavaScript อีก 2 แบบ

1. การ Get Element ที่ต้องการ โดยใช้ document.getElementById() หรือ function อื่นๆในการ เลือก Element ที่ต้องการแล้วทำการกำหนด function ให้กับ event นั้นๆ

2. อีกวิธีจะเป็นการใช้ addEventListener

เราสามารถเลือกใช้งานได้ทั้ง 2 วิธีหลัง แต่ไม่แนะนำให้ Bind แบบแรก เนื่องจากจะทำให้ Code เราทำการแก้ไขได้ยาก