1

有没有办法使用 CSS 选择器选择出现在给定元素之后的元素。

假设我有一个像这样的 DOM

<body>
  <span class="next">A next span</span>
  <div>
    <span class="next target">the target next span</span>
  </div>
  <div>
    <span class="next">this is the one I want to select</span>
  </div>
</body>

我想选择spanclass 的 s，next但只选择出现在span.next.target. 使这变得棘手的是它们不必是兄弟姐妹或在同一个父节点下，而是可以出现在 DOM 中的任何位置。

这甚至可能吗，还是我注定要坚持使用 for 循环？

4

1 回答 1

0

您可以为此使用纯 JavaScript：

'use strict';

console.clear();
const spanNextNodes = document.querySelectorAll('div span.next');

let find = function*(nodes) {
    let isNextTargetFound = false,
        arrayOfNodes = Array.prototype.slice.call(nodes);       // untill spread operator is supported [...nodes], we have to use slice method

    for (let n of arrayOfNodes) {
        if (isNextTargetFound) {
            yield n;
        } else if (n.classList.contains('target')) {
            isNextTargetFound = true;
        }
    }
}

for (let item of find(spanNextNodes)) {
    console.log(item);
}

这是一个示例 它基于 ES2015 标准，使用函数生成器（yield），但如果您想使用 ES5，您可以将项目添加到数组并返回数组。

于 2016-01-09T19:28:53.267 回答