jQuery ການພອດພຽງ - ພື້ນຖານ filter()

jQuery ການເລັກມູນມັດ

ຄວາມນຳມະນາການ

ປ່ຽນສະຫຼັດສີຂອງ "div" ແລະ ສະເໜີຕາຍິດປະເພດ "middle":

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

ທົດລອງດຽວກັບເຈົ້າເອງ

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

filter() ວິທີຈະປັບລົງຄວາມຈິງຂອງກຸ່ມລູກມູນມັດທີ່ຈະມີຄວາມຈິງກັບການເລືອກທີ່ກຳນົດ.

ວິທິການ

.filter(selector)
ຄວາມມູນ ອະທິບາຍ
selector ຄວາມມູນຄໍາ, ລວມມີການເລືອກການຈະກັບການຈັດຕັ້ງຂອງລູກມູນມັດສະໜອງກັບການຈັດຕັ້ງ.

ອະທິບາຍຫຼັກ

ຖ້າມີຈຸດສະທ້ອນ jQuery ທີ່ສະແດງຄວາມມີລູກມູນມັດ DOM, .filter() ວິທີຈະນຳໃຊ້ການສ້າງລູກມູນມັດ jQuery ຂອງກຸ່ມລູກມູນມັດທີ່ຈະມີຄວາມຈິງ. ການເລືອກຈະທົດລອງແຕ່ລະປະກອບສິ່ງ; ລູກມູນມັດທັງໝົດທີ່ມີຄວາມຈິງກັບການເລືອກຈະບັນຈຸໃນຜົນ.

ບັນທຶກດັ່ງກ່າວນີ້ທີ່ມີລາຍລະອຽດທີ່ລະອຽດຫຼັງທີ່ຫຼາຍກວ່າຈະນັ້ນ:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

ພວກເຮົາສາມາດນຳໃຊ້ວິທີນີ້ຕໍ່ກັບກຸ່ມລາຍລະອຽດສະໝອງນີ້:

$('li').filter(':even').css('background-color', 'red');

ທົດລອງດຽວກັບເຈົ້າເອງ

ຜົນຂອງການເອິ້ນຄັນຈະຖືກຈັດໃຫ້ຂອງບັນດາລູກອົງ 1, 3, 5 ກຳລັງມີລັງສີສີຂຽວ, ຍ້ອນວ່າພວກເຂົາທັງໝົດມີຄວາມຈິງກັບການເລືອກ (ບັງຄັບໃຫ້ກັບ 0 ຂອງ :even ແລະ :odd).

ການໃຊ້ວິທີການກັບຄືນ

ຮູບແບບຂອງການໃຊ້ວິທີທີສອງຂອງການນຳໃຊ້ວິທີຈາກຕົວຢ່າງວ່າການເລືອກ. ສໍາລັບແຕ່ລະປະກອບສິ່ງ, ຖ້າການກັບຄືນຂອງການກັບຄືນຂອງວິທີຈະມີຄວາມມີຄວາມຈິງ, ປະກອບສິ່ງຈະບັນຈຸໃນການເລືອກຂອງລະບົບ; ຖ້າບໍ່, ປະກອບສິ່ງຈະຖືກທຳງວັງ.

ບັນທຶກດັ່ງກ່າວນີ້ທີ່ມີ HTML ສາຍຫຼັງທີ່ຫຼາຍກວ່າຈະນັ້ນ:

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong>
   - two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

ພວກເຮົາສາມາດເລືອກຢ່າງນີ້ຂອງລາຍການລາຍລະອຽດຫນັງຈາກຂັ້ນນຳຂອງພວກເຂົາ:

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');

jQuery ການເລັກມູນມັດ