在JavaScript中使用列表元素的兄弟?
为了找到列表元素的同级 元素,javascript提供了一种称为node.nextSibling的方法。如果我们知道列表的任何成员,我们可以找到其同级。让我们简要地讨论一下。
语法
node.nextSibling;
示例
在以下示例中,有3个列表元素。使用 nextSibling属性,找到第一个元素的同级并将结果显示在输出中。
现场演示
<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
示例
在以下示例中,有3个列表元素。使用 nextSibling属性,找到第二个元素的同级并将结果显示在输出中。兄弟元素不过是目标元素的下一个元素。
现场演示
<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