javascript - jQuery: Find next element that is not a sibling

Question

Let's say I have following HTML:

<span>
    <span id="x1" class="x">X1</span>
</span>
<span>
    <span>
        <span id="x2" class="x">X2</span>
    </span>
</span>

And $(this) is the <span id="x1" ...>.

What is the best way to find next element matching .x with jQuery?
The structure of the actual document is unpredictable, so the HTML provided is only an example.

I can't use nextAll as it only finds siblings.
If I do $('.x'), it finds all, but I'll have to iterate/compare.
Is there a better solution?

See also: http://jsfiddle.net/JZ9VW/1/.

question from:https://stackoverflow.com/questions/14035206/jquery-find-next-element-that-is-not-a-sibling

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