Question

有没有办法选择使用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>

我想选择span类的next，但只选择span.next.target之后的{{1}}。让这个棘手的是，他们不需要是兄弟姐妹，也不需要在同一个父节点下，但可以出现在DOM的任何地方。

这是否可能，或者我注定要坚持使用for循环？

Answer 1

您可以使用普通的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);
}

Here is an example 它基于使用函数发生器（yield）的ES2015标准，但如果您想使用ES5，您可以将项添加到数组并返回数组。

querySelector在特定元素之后

1 个答案: