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 การวนลูป。