jQuery Siblings

jQuery Siblings ใช้เพื่อค้นหาพี่น้องร่วมท้อง หรือในทาง DOM three จะเป็นลักษณะของ element ที่เป็นลูกหลานของ element นั้นโดยตรง ซึ่งมีเมธอดในการใช้งานดังนี้

  • siblings() – ค้นหา/เลือก element ทั้งหมดที่เป็นพีน้องร่วมท้อง หรือมีพ่อ-แม่ (parent) เดียวกัน
  • next() – ค้นหา/เลือก element ถัดไปจาก element ที่เลือก โดยจะต้องเป็นพี่น้องที่มี parent เดียวกัน
  • nextAll() – ค้นหา/เลือก element ทั้งหมดที่ถัดไปจาก element ที่เลือก
  • nextUntil() – ค้นหา/เลือก element ทั้งหมดที่อยู่ระหว่าง element ที่เลือก 2 element
  • prev() – ค้นหา/เลือก element ก่อนหน้าจาก element ที่เลือก โดยจะต้องเป็นพี่น้องที่มี parent เดียวกัน
  • prevAll() – ค้นหา/เลือก element ทั้งหมดที่อยู่ก่อนหน้าจาก element ที่เลือก
  • prevUntil() – ค้นหา/เลือก element ทั้งหมดที่อยู่ระหว่าง element ที่เลือก 2 element โดยจะต้องเป็น element ก่อนหน้า

 

1.siblings()

<html>
<head>
<style>
.siblings * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("h2").siblings().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (parent)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
</html>

ไฟล์ที่ 1 siblings()

จากไฟล์ที่ 1 สามารถอธิบายได้ว่า jquery เลือก element ทั้งหมดที่มี parent เดียวกันกับ element ที่เลือก ซึ่งจากตัวอย่าง element ที่เป็น siblings ประกอบไปด้วย <p>, <span>, <h3> และ <p>

 

2.next()

<html>
<head>
<style>
.siblings * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("h2").next().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (parent)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
</html>

ไฟล์ที่ 2 next()

จากไฟล์ที่ 2 เป็นการเลือก element ถัดไปจาก element ที่เลือกโดยที่ element ที่เลือกคือ <h2> ส่วน element ถัดไปคือ <h3> นั่นเอง และที่สำคัญต้องมี parent เดียวกัน

 

3.nextAll()

<html>
<head>
<style>
.siblings * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("h2").nextAll().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (parent)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
</html>

ไฟล์ที่ 3 nextAll()

จากไฟล์ที่ 3 เป็นการเลือกค้าหา element ทั้งหมดที่ถัดไปจาก element <h2>  

 

4.nextUntil()

<html>
<head>
<style>
.siblings * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (parent)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>
  <p>p</p>
</div>

</body>
</html>

ไฟล์ที่ 4 nextUntil()

จากไฟล์ที่ 4 เป็นการเลือก element ทั้งหมดที่อยู่ระหว่าง element 2 element ที่เลือก ซึ่งในที่นี้คือ <h2> กับ <h6> 

 

หลักการทำงานของ prev(), prevAll(), และ prevUntil เหมือนกันกับข้อ 2-4 เพียงแต่การค้นหาจะกลับกันจากถัดไป เป็นก่อนหน้า 

next –> –> –>

<– <– <— prev