title: jQuery: Find next element that is not a sibling
body: <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>