Sibling ของ List Element ใน JavaScript

เพื่อหา Sibling ของ List Element JavaScript มีเมธอด node.nextSibling หากรู้ Member ใดใน List สามารถหา Sibling ได้ มาดูรายละเอียดกัน

Syntax

node.nextSibling;

ตัวอย่าง

ในตัวอย่างนี้ มี List Elements 3 ตัว ใช้ nextSibling Property หา Sibling ของ Element แรก และแสดงผลลัพธ์

<html> <body> <ul><li id="item1">Tesla</li><li id="item2">Spacex</li><li id="item3">Solarcity</li></ul> <p id="next"></p> <script> var x = document.getElementById("item1").nextSibling.innerHTML; document.getElementById("next").innerHTML = "The sibling element is "+" "+x; </script> </body> </html>

ผลลัพธ์

Tesla Spacex Solarcity The sibling element is Spacex

ตัวอย่าง

ในตัวอย่างนี้ หา Sibling ของ Element ที่สอง ด้วย nextSibling Property และแสดงผลลัพธ์ Sibling คือ Element ถัดไปของ Target Element

<html> <body> <ul><li id="item1">Tesla</li><li id="item2">Spacex</li><li id="item3">Solarcity</li></ul> <p id="next"></p> <script> var x = document.getElementById("item2").nextSibling.innerHTML; document.getElementById("next").innerHTML = "The sibling element is "+" "+x; </script> </body> </html>

ผลลัพธ์

Tesla Spacex Solarcity The sibling element is Solarcity