Question

我希望能够选择超过某个元素的所有兄弟姐妹，如下所示：

<ul>
    <li>Unselected</li>
    <li>Unselected</li>
    <li id="start">Start Here</li>
    <li>Selected</li>
    <li>Selected</li>
    <li>Selected</li>
</ul>

我无法计划选择的兄弟姐妹的数量或者它将开始的数量，所以我猜测在某些时候需要有.length。

仅香草JS :)谢谢！

Answer 1

您可以使用~选择器

选择这些元素

var elems = document.querySelectorAll("#start ~ li");

DEMO

Answer 2

要迭代兄弟姐妹，只需使用nextElementSibling：

var e = document.getElementById("start");
while (e = e.nextElementSibling) e.classList.add("selected");

var e = document.getElementById("start");
while (e = e.nextElementSibling) e.classList.add("selected");

.selected {
  color: red;
}

<ul>
    <li>Unselected</li>
    <li>Unselected</li>
    <li id="start">Start Here</li>
    <li>Selected</li>
    <li>Selected</li>
    <li>Selected</li>
</ul>

Answer 3

var node = document.getElementById("start") var sibling = node.nextElementSibling;

这将在节点之后立即返回兄弟节点，或者不再有兄弟节点可用。

JavaScript选择元素之后的所有兄弟

3 个答案:

DEMO