jQuery ການພອດບາດ - closest()

ຈຸດສະຫຼຸບ jQuery ການຊອກຫາ

ຄວາມນິຍົມ

ບົດການນີ້ສະແດງວ່າບວກ closest() ການສະໜອງການຄັດຄ້ານງານ. ເມື່ອປະກອງທີ່ມີຫຼັງຄືນຫຼືລູກຫຼັງຂອງປະກອງທີ່ມີຫຼັງຄືນທີ່ຕິດຕາມຄູ່ວາງລຸ່ມຕິດຕາມຄູ່ວາງລຸ່ມ, ຈະປ່ຽນສະໜອງສີສີຂຽວ:

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

ທ້າທາຍຄັບຄູ່ເອງ

ການອະທິບາຍ ແລະ ການນໍາໃຊ້

ການມາຄືນປະກອງທີ່ຕິດຕາມຄູ່ວາງລຸ່ມທີ່ທີ່ສຸດ, ຈາກປະກອງປະຈຸບັນ ຢືດຢູ່ໃນຕອນເລື່ອງ DOM.

ວິທິການ

.closest(selector)
ປະກອບ ອະທິບາຍ
selector ຄູ່ວາງລຸ່ມທີ່ເປັນຄວາມຈິງ, ບັນຈຸຄູ່ວາງລຸ່ມທີ່ຕິດຕາມຄູ່ວາງລຸ່ມ.

ການອະທິບາຍຢືນຢັນ

ຖ້າມີສະໝອງ jQuery ທີ່ປະກອງ DOM, .closest() ການສາມາດຂອງພວກເຮົາເພື່ອກວດສອບປະກອງທີ່ມີໃນຕອນເລື່ອງ DOM ແລະພໍ່ຂອງພວກເຂົາ, ແລະສ້າງສະໝອງ jQuery ທີ່ມີປະກອງທີ່ຕິດຕາມຄູ່ວາງລຸ່ມ..parents() ຄືກັບ .closest(), ທັງສອງພວກເຂົາທີ່ຢືດຢູ່ໃນຕອນເລື່ອງ DOM; ຄວາມແຕກຕ່າງລະຫວ່າງສອງພວກເຂົາແມ່ນຈະສັບສົນ, ແຕ່ກໍ່ມີຄວາມສໍາຄັນ:

.closest() .parents()
ຈາກປະກອງປະຈຸບັນ ຈາກປະກອງພໍ່
ຢືດຢູ່ໃນຕອນເລື່ອງ DOM ພາຍໃນຫຼັງຈົນກວ່າພົບປະກອງທີ່ຕິດຕາມຄູ່ວາງລຸ່ມ ຢືດຢູ່ໃນຕອນເລື່ອງ DOM ພາຍໃນຫຼັງຈົນກວ່າພົບປະກອງທີ່ຕິດຕາມຄູ່ວາງລຸ່ມໃຫ້ສະໝອງນັ້ນ; ຖ້າມີຄູ່ວາງລຸ່ມ, ຈະກວດຄົ້ນຄວາມຄົບຄອບຈາກຄູ່ວາງລຸ່ມດັ່ງກ່າວ.
ກັບມາສະໝອງ jQuery ທີ່ມີປະກອງຫຼາຍຫຼືບໍ່ມີປະກອງ ກັບມາສະໝອງ jQuery ທີ່ມີປະກອບຫຼາຍຫຼືບໍ່ມີປະກອບ

ບັນຍາວ່າໃນຖານຮູບພາບ 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> ຈາກລູກລາຍງາຍ A:

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

ທ້າທາຍຄັບຄູ່ເອງ

ມັນຈະປ່ຽນສີ level-2 <ul> ຍ້ອນວ່າມັນເປັນສິ່ງທີ່ຕອບສະໜອງທຳອິດໃນການຊອກຫາຂອງ DOM.

ຕົວຢ່າງ 2

ກໍຕັ້ງວ່າພວກເຮົາຊອກຫາ <li> ອີກ:

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

ທ້າທາຍຄັບຄູ່ເອງ

ມັນຈະປ່ຽນສີຂອງລູກລາຍງາຍ A. ກ່ອນທີ່ .closest() ພະຍານຈະຊອກຫາຈາກເອກະສານ li ເທີ່ຈະສົມບູນຄວາມຈິງຂອງລູກລາຍງາຍ A.

ຕົວຢ່າງ 3

ພວກເຮົາສາມາດສົ່ງສະນັບ DOM ເປັນ context ເພື່ອຊອກຫາສິ່ງທີ່ໃກ້ສຸດ.

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> ຍ້ອນວ່າມັນເປັນພະຍານທໍາອິດຂອງ list item A <ul> ແລະຍັງເປັນລູກລາຍງາຍຂອງ list item II. ມັນຈະບໍ່ປ່ຽນສີ level-1 <ul> ຍ້ອນວ່າມັນບໍ່ແມ່ນລູກລາຍງາຍຂອງ list item II.

ຈຸດສະຫຼຸບ jQuery ການຊອກຫາ