Tìm sibling của element trong list JavaScript

Để tìm sibling (anh/chị em) của list element, JavaScript cung cấp node.nextSibling. Biết một member có thể tìm sibling kế tiếp.

Cú pháp

node.nextSibling;

Ví dụ 1: Sibling của element đầu tiên

<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>

Kết quả

Tesla Spacex Solarcity The sibling element is Spacex

Ví dụ 2: Sibling của element thứ 2

<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>

Kết quả

Tesla Spacex Solarcity The sibling element is Solarcity

Lưu ý: nextSibling trả về node kế tiếp (kể cả text node trắng). Thường dùng nextElementSibling để chỉ lấy element node. Còn previousSibling / previousElementSibling cho sibling trước.