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

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