jQuery ການພອດພຽງ - find()

ຄູ່ມວນຊາຍ ຂອງ jQuery

ຄວາມຈຳນວນ

ຊອກຫາປະກອບ span ທີ່ຢູ່ໃນຕົ້ນຂອງປະກອບ p, ແລະ ຈັດການສີສັນຍາວ່າ ສີສີນົມ.

$("p").find("span").css('color','red');

ຕັ້ງຕາມການທົດລອງ

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

find() ມີຄວາມຄິດຮູບຂອງພັດທະນາຂອງ jQuery, ຈະຈັດການພົບກັບປະກອບທີ່ພວກເຮົາສົ່ງໄປຫາ $() ຕາມຄຳນວຍຫາ, jQuery ໂອບຣອກ, ຫຼື ປະກອບ.

ວິທະຍາສາດ

.find(selector)
ພຽງພໍ ອະທິບາຍ
selector ຄູ່ມູນທີ່ເປັນຄຳນວຍຫາ, ບັນຈຸທີ່ຈະຈັດການກັບປະກອບປະກອບ.

ອະທິບາຍຢ່າງລະອຽດ

ຖ້າມີ jQuery ໂອບຣອກທີ່ສະແດງຄວາມສະນັບສະນູນຂອງ DOM ປະກອບ, .find() ອະນຸຍາດພວກເຮົາທີ່ຈະຊອກຫາຫົວອອກຂອງພວກມັນໃນຕົ້ນມາຂອງ DOM, ແລະ ຈະສ້າງ jQuery ໂອບຣອກໃໝ່ຈາກປະກອບທີ່ຈະຕົກຮັບ. .find() ແມ່ນຄືກັບ .children() ຕາມຮູບແບບ, ແຕ່ວ່າ .children() ຈະຈັດການພາຍໃນລະດັບດຽວຂອງ DOM.

.find() ມີຜົນປະກອບທີ່ຈະກະທັ້ງກັບຄຳນວຍຫາທີ່ພວກເຮົາສົ່ງໄປຫາ $() ຕາມຮູບແບບ. ຈະພົບກັບຄຳນວຍຫາທີ່ພວກເຮົາສົ່ງໄປຫາ $() ເພື່ອຈັດການກັບປະກອບ.

ກະຕືລັງຄິດຂໍ້ມູນທີ່ລະບຸຄວາມລະອຽດນີ້:

<ul class="level-1">
  <li class="item-i">I</li>
  <li 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>

ພວກເຮົາຈະເລີ່ມການຊອກຫາບັນດາບັນທຶກໃນລາຍການ II:

$('li.item-ii').find('li').css('background-color', 'red');

ຕັ້ງຕາມການທົດລອງ

ຜົນຂອງການສຳລັບການສຳລັບການກວດສອບນີ້ແມ່ນວ່າບັນດາບັນທຶກ A, B, 1, 2, 3 ແລະ C ໄດ້ຖືກກະຕຸ້ມເປັນສີສີແດງຫຼັງການກະຕຸ້ມ. ເຖິງວ່າບັນດາບັນທຶກ II ໄດ້ຕິດຕາມ selector expression, ມັນຈະບໍ່ຖືກບັນຈຸມີໃນຜົນ; ຈະພຽງແຕ່ບັນດາພັນທະມິດພາຍໃນ

ທີ່ຕ່າງກັບວິທີການຊອກຫາຕົວເລກພາຍໃນຕົວແທນ, selector expression ສໍາລັບ .find() ແມ່ນຂໍ້ສັງເກດທີ່ຈຳເປັນ. ຖ້າພວກເຮົາຕ້ອງການຊອກຫາບັນດາພັນທະມິດພາຍໃນບັນດາພັນທະມິດພາຍໃນ, ພວກເຮົາສາມາດສົ່ງ wildcard selector '*'

context ຕໍ່ກັບ .find() ແມ່ນການດໍາເນີນງານ; ບັນດາ $('li.item-ii').find('li') ແມ່ນບໍ່ກົງກັນກັບ $('li', 'li.item-ii')

ສໍາລັບ jQuery 1.6ພວກເຮົາກໍ່ສາມາດໃຊ້ບັນດາບັນທຶກ jQuery ຫຼືສິ່ງໜຶ່ງສຳລັບການເລືອກ. ຍັງຢູ່ຂອງລາຍການທີ່ລວມມີການກັບຕົວຂອງພວກເຮົາກໍ່ໄດ້ຂຽນວ່າ:

var $allListElements = $('li');

ຫຼັງຈາກນັ້ນຈະສົ່ງບັນດາບັນທຶກ jQuery ຕໍ່ກັບວິທີການ find:

$('li.item-ii').find( $allListElements );

ຕັ້ງຕາມການທົດລອງ

ວິທີການດັ່ງກ່າວນີ້ຈະກັບຄືນມາ jQuery ຄືນທີ່ບັນຈຸມີຕົວເລກຂອງອີກຫຼັງຂອງລາຍການ II

ຢ່າງປົກກະຕິນັ້ນກໍ່ສາມາດສົ່ງເສີມສິ່ງໜຶ່ງ

var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');

ຕັ້ງຕາມການທົດລອງ

ຜົນຂອງການເກັບຂໍ້ມູນນີ້ແມ່ນອອກມາວ່າໂຄງການ 1 ໄດ້ຖືກກະຕຸ້ມເປັນສີສີແດງຫຼັງການກະຕຸ້ມ

ຄູ່ມວນຊາຍ ຂອງ jQuery