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>

spanクラスのを選択したいのですが、 の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);
}

これは 関数ジェネレーター (yield) を使用する ES2015 標準に基づいていますが、ES5 を使用する場合は、代わりに配列に項目を追加して配列を返すことができます。

于 2016-01-09T19:28:53.267 に答える