jQuery: Find next element that is not a sibling
<p>Let's say I have following HTML:</p>

<pre><code>&lt;span&gt;
    &lt;span id="x1" class="x"&gt;X1&lt;/span&gt;
&lt;/span&gt;
&lt;span&gt;
    &lt;span&gt;
        &lt;span id="x2" class="x"&gt;X2&lt;/span&gt;
    &lt;/span&gt;
&lt;/span&gt;
</code></pre>

<p>And <code>$(this)</code> is the <code>&lt;span id="x1" ...&gt;</code>.  </p>

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

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

<p>See also: <a href="http://jsfiddle.net/JZ9VW/1/">http://jsfiddle.net/JZ9VW/1/</a>.</p>
