jQuery ການອາຊີບ - ພີ່ນ້ອຍສະເລ່ຍ

ປະກອບຫົວໃສມີປະກອບຫົວໃສຜູ້ເປັນພັນລະບົບພຽງຜູ້ດຽວ.

ຜ່ານ jQuery, ທ່ານສາມາດຢືອບວົງວຽນປະກອບຫົວໃສພັນລະບົບໃນ DOM.

ຢືອບວົງວຽນ DOM

ມີຫລາຍວິທີທີ່ມີປະໂຫຍດຫລາຍໃຫ້ພວກເຮົາຢືອບວົງວຽນ DOM.

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

jQuery siblings() ວິທີ

siblings() ວິທີກັບຄືນຄືວ່າປະກອບຫົວໃສທີ່ຢູ່ພັນລະບົບທີ່ຢູ່ຫລັງປະກອບຫົວໃສທີ່ເລືອກ.

ບົດຢ່າງດັ່ງກ່າວນີ້ຈະກັບຄືນຄືວ່າປະກອບຫົວໃສທີ່ຢູ່ພັນລະບົບທີ່ຢູ່ຫລັງ <h2>.

ຄວາມຄິດ

$(document).ready(function(){
  $("h2").siblings();
});

ທົດລອງຕົນເອງ

ທ່ານສາມາດນຳໃຊ້ຄຳຕິດຕາມທີ່ຄວນເລືອກເພື່ອການກວດສອບປະກອບຫົວໃສພັນລະບົບ.

ບົດຢ່າງດັ່ງກ່າວນີ້ຈະກັບຄືນຄືວ່າປະກອບ <p> ທີ່ຢູ່ພັນລະບົບທີ່ຢູ່ຫລັງ <h2>.

ຄວາມຄິດ

$(document).ready(function(){
  $("h2").siblings("p");
});

ທົດລອງຕົນເອງ

jQuery next() ວິທີ

next() ວິທີກັບຄືນຄືວ່າປະກອບຫົວໃສທີ່ເຫລືອທີ່ຢູ່ຫລັງປະກອບຫົວໃສທີ່ເລືອກ.

ວິທີນີ້ຈະກັບຄືນຄືວ່າປະກອບຫົວໃສພຽງຜູ້ດຽວ.

ບົດຢ່າງດັ່ງກ່າວນີ້ຈະກັບຄືນຄືວ່າປະກອບຫົວໃສທີ່ເຫລືອທີ່ຢູ່ຫລັງ <h2>.

ຄວາມຄິດ

$(document).ready(function(){
  $("h2").next();
});

ທົດລອງຕົນເອງ

jQuery nextAll() ວິທີ

nextAll() ວິທີກັບຄືນຄືວ່າປະກອບຫົວໃສທີ່ຢູ່ຫລັງປະກອບຫົວໃສທີ່ເລືອກ.

ບົດຢ່າງດັ່ງກ່າວນີ້ຈະກັບຄືນຄືວ່າປະກອບຫົວໃສທີ່ຢູ່ຫລັງ <h2>.

ຄວາມຄິດ

$(document).ready(function(){
  $("h2").nextAll();
});

ທົດລອງຕົນເອງ

jQuery nextUntil() ວິທີ

nextUntil() ວິທີກັບຄືນຄືວ່າປະກອບຫົວໃສທີ່ຢູ່ລະຫວ່າງສອງປະກອບຫົວໃສທີ່ໃຫ້ຄຳຕິດຕາມ.

ບົດຢ່າງດັ່ງກ່າວນີ້ຈະກັບຄືນຄືວ່າປະກອບຫົວໃສທີ່ຢູ່ລະຫວ່າງ <h2> ແລະ <h6> ພາຍໃນຄວາມຄິດ.

ຄວາມຄິດ

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

ທົດລອງຕົນເອງ

jQuery prev(), prevAll() & prevUntil() ວິທີ

prev(), prevAll() ແລະ prevUntil() ວິທີການເຮັດວຽກຄືກັນກັບວິທີກ່ວາ, ວ່າຈະມີທິດທາງກັບຕົວເລື່ອງ: ພວກມັນກັບຄືນຄືວ່າປະກອບຫົວໃສກ່ວາໃນຮູບແບບ DOM (ຈະຢືອບກັບປະກອບຫົວໃສພັນລະບົບທີ່ຢູ່ຫລັງ, ບໍ່ແມ່ນຫລັງ).

jQuery ປື້ມການພິສູດການຢືອບ

ສຳລັບການຮຽນຮູ້ທັງໝົດຂອງວິທີ jQuery ພິສູດການຢືອບ, ກະລຸນາຢ້ຽມຢາມພວກເຮົາ jQuery ປື້ມການພິສູດການຢືອບ。