Get the next element (not necessarily a sibling) which matches a selector in jQuery
<p>I have this markup</p>

<pre><code>&lt;a class="foo"&gt;&lt;/a&gt;
&lt;div&gt;
  &lt;span class="foo"&gt;&lt;/span&gt;
  &lt;ul&gt;
    &lt;li class="foo"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;em class="foo"&gt;&lt;/em&gt;
&lt;/div&gt;
&lt;div class="foo"&gt;&lt;/div&gt;
</code></pre>

<p>I'll have a click handler attached to <code>.foo</code>. I want to fetch the next element in the DOM tree that has the same class.</p>

<p>I've made a <a href="http://jsfiddle.net/Dogbert/tXxng/" rel="nofollow">jsFiddle</a> with the markup and js code, if you want to try out something.</p>

<p>I could make an array of all .foo elements, and then run loops to find the current index, and return the next index, but I'm sure there's a better solution. Also, that solution won't work if I add elements dynamically to the page (which I will).</p>

<p>How should I proceed with this?</p>
