jQuery การเดินทาง - การใช้ closest()

jQuery การเลือกออกมาเพื่อปรึกษา

ตัวอย่าง

ตัวอย่างนี้แสดงว่าเราจะทำ event delegation ด้วย closest(). เมื่อองค์ประกอบรายการหรือลูกของมันที่ใกล้ที่สุดถูกคลิก จะเปลี่ยนสีพื้นหลังเป็นสีเหลือง:

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

ทดลองด้วยตัวเอง

คำนิยามและการใช้งาน

closest() หาองค์ประกอบที่ตรงกับเลือกตัวเลือกแรกที่เป็นเจ้าพ่อ จากองค์ประกอบปัจจุบันขึ้นตามต้นไม้ DOM

คำนิยาม

.closest(selector)
ตัวแปร อธิบาย
selector ค่าตัวแปรตัวอักษร ที่มีเลือกตัวเลือกที่ตรงกับองค์ประกอบที่ตรงกับเลือกตัวเลือก

รายละเอียด

หากมี jQuery Object ที่แสดงชุดขององค์ประกอบ DOM มา ใช้ .closest() มีความหมายว่าเราสามารถค้นหาองค์ประกอบนี้และองค์ประกอบที่เป็นเจ้าพ่อของมันในต้นไม้ DOM และใช้องค์ประกอบที่ตรงกับเลือกตัวเลือกเพื่อทำ jQuery Object ใหม่.parents() และ .closest() มีความเหมือนกันที่จะเดินทางขึ้นตามต้นไม้ DOM ตามที่เห็นได้; แต่ความแตกต่างที่ไม่เป็นจริงนั้นสำคัญมาก:

.closest() .parents()
จากองค์ประกอบปัจจุบัน จากองค์ประกอบพ่อ
เดินทางขึ้นตามต้นไม้ DOM จนหาถึงองค์ประกอบที่ตรงกับเลือกตัวเลือกที่มีการปรับปรุง เดินทางขึ้นตามต้นไม้ DOM จนถึงต้นไม้ของเอกสาร และเพิ่มแต่ละองค์ประกอบที่เป็นเจ้าพ่อเข้าสู่ชุดชั่วคราว; หากมีการใช้เลือกตัวเลือก จะทำการกรองชุดดังกล่าวเบื้องต้นด้วยเลือกตัวเลือกนั้น
ส่งผลลัพธ์เป็น jQuery Object ที่มีสมาชิกที่มีจำนวนเท่ากับ 0 หรือ 1 ส่งผลลัพธ์เป็น jQuery Object ที่มีสมาชิกที่มีจำนวนเท่ากับ 0, 1 หรือมากกว่า

โปรดดูส่วนต่อไปนี้ของ HTML บล็อค

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

ตัวอย่าง 1

จงจัดการค้นหาตัวแทน <ul> ที่เริ่มต้นจาก item A

$('li.item-a').closest('ul').css('background-color', 'red');

ทดลองด้วยตัวเอง

นี้จะเปลี่ยนสีของ level-2 <ul> นี้เพราะเมื่อเคลื่อนไปขึ้นออกมาหาต้นของต้นโซ่ DOM มันจะเจอแรกที่อิเลย์ท์นี้

ตัวอย่าง 2

จงเลือก element <li> ที่เราค้นหา

$('li.item-a').closest('li').css('background-color', 'red');

ทดลองด้วยตัวเอง

นี้จะเปลี่ยนสีของรายการ item A ก่อนที่จะเคลื่อนไปขึ้นออกมาหาต้นของต้นโซ่ DOM วิธี .closest() จะเริ่มค้นหาจากตัวแทน li มาตั้งแต่เริ่มต้น จนกว่าจะตรงกับรายการ A

ตัวอย่าง 3

เราสามารถส่งออก DOM อิเลย์ท์เพื่อค้นหาอิเลย์ท์ใกล้เคียงในองค์กรรม

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

ทดลองด้วยตัวเอง

รหัสที่แถวนี้จะเปลี่ยนสีของ level-2 <ul> เพราะมันเป็นประวัติต้นของ <ul> ของ item A และเป็นลูกหลานของ item II มันจะไม่เปลี่ยนสีของ level-1 <ul> เพราะมันไม่ใช่ลูกหลานของ item II

jQuery การเลือกออกมาเพื่อปรึกษา