在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