在两个元素之间选择特定元素

Question

我给定了一些相当讨厌的 HTML，并希望遍历给定标题下的所有列表元素。不幸的是，我想跳过这两者之间的一些 cmets。

<header><h2>A</h2></header>
<ul class="list">...</ul>
<header><h2>C</h2></header>
<p>Some comment</p>
<ul class="list">...</ul>
<p>Another comment</p>
<ul class="list">...</ul>
<header><h2>B</h2></header>
<p>Some comment</p>
<ul class="list">...</ul>

我试过document.querySelectorAll('h2 ~ .list:not(h2)')，但这没有任何回报。

所以，理想情况下，我会检查每个标题，并为每个标题检索lists，类似于

const headers = document.querySelectorAll('h2');
for(let i = 0; i < headers.length; ++i)
{
  // Somehow get an Array of `list` elements between h2 i and i+1
}

Answer 1

如果您只需要ul 元素，您可以将选择器简化为'header ~ .list'。这是因为h2 元素是header 的子元素并且没有兄弟姐妹，因此一般的兄弟姐妹选择器“~”不匹配。

const lists = document.querySelectorAll('header ~ .list');

console.log(lists.length);

<header><h2>A</h2></header>
<ul class="list">...</ul>
<header><h2>C</h2></header>
<p>Some comment</p>
<ul class="list">...</ul>
<p>Another comment</p>
<ul class="list">...</ul>
<header><h2>B</h2></header>
<p>Some comment</p>
<ul class="list">...</ul>

Answer 2

假设你想要 both 与它相关的 header 和 .list，单个选择不会为你做这件事，你必须做一些遍历。 （如果您只想要.lists，请参阅chazsolo's answer。）

1. 选择header 元素。
2. 遍历它们
   1. 在“this”header 处理你找到的任何 uls 之后循环通过兄弟姐妹 (nextElementSibling)，在第一个 header 处停止

大致：

// Ideally, if you can narrow down this initial select, that would be good
const headers = document.querySelectorAll("header");
for (const header of headers) { // *** See note
    let list = header.nextElementSibling;
    while (list && list.tagName !== "HEADER") {
        if (list.tagName === "UL") {
            console.log("Found: " + list.id);
        }
        list = list.nextElementSibling;
    }
}

现场示例：

// Ideally, if you can narrow down this initial select, that would be good
const headers = document.querySelectorAll("header");
for (const header of headers) { // *** See notes
    let list = header.nextElementSibling;
    while (list && list.tagName !== "HEADER") {
        if (list.tagName === "UL") {
            console.log("Found: " + list.id);
        }
        list = list.nextElementSibling;
    }
}

<!-- Added IDs just to make showing them easier -->
<header><h2>A</h2></header>
<ul class="list" id="list1">...</ul>
<header><h2>C</h2></header>
<p>Some comment</p>
<ul class="list" id="list2">...</ul>
<p>Another comment</p>
<ul class="list" id="list3">...</ul>
<header><h2>B</h2></header>
<p>Some comment</p>
<ul class="list" id="list4">...</ul>

---

注意for (const header of headers)：这依赖于来自querySelectorAll 的NodeList 是可迭代的。它被指定为可迭代的，并且在现代浏览器上是可迭代的，但稍旧的（和过时的）可能有 NodeList 而不是可迭代的。在这种情况下，您可以使用forEach。但过时的浏览器甚至没有。您可以填充 forEach 或可迭代性或两者兼有，请参阅 my answer here 了解详细信息。否则，使用老式的for 循环。 :-)