jQuery: Find next element that is not a sibling

Question

Let\'s say I have following HTML:

    X1


    
        

        

Answer 1

Select all elements with class x, calculate the index of the current element and get the element with the index + 1:

var $x = $('.x');
var $next = $x.eq($x.index(this) + 1);

This works because elements are selected in document order. You only have to select all .x elements once on page load (if they are not dynamically created).

Answer 2

You could use xpath:

document.evaluate('following::*[@class="x"], elt, null, XPathResult.ANY_TYPE, null);

or you could use a walker:

var walker = document.createTreeWalker(elt, NodeFilter.SHOW_ELEMENT, function(node) {
    return node.classList.has('x');
});

while (walker.nextNode) {
    do_something_with(walker.currentNode);
}