querySelector after a specific element

5.1k Views Asked by sitifensys At 04 April 2025 at 09:57

Is there a way to select elements appearing after a given element using CSS selectors.

Suppose I have a DOM like this one

<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>

I want to select the spans of class next but only the ones that appear after span.next.target. What make this tricky is that they need not to be siblings or under the same parent node but can appear anywhere in the DOM.

Is this even possible, or am I doomed to stick with a for loop?

Original Q&A

There are 1 best solutions below

Vlad Bezden On 09 January 2016 at 19:28

You can use plain javascript for this:

'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 It's based on ES2015 standards using function generators (yield), but if you would like to use ES5 you can add items to array and return array instead.

querySelector after a specific element

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in DOM

Related Questions in SELECTORS-API

Trending Questions

Popular # Hahtags

Popular Questions