jQuery -- adding and removing a class using next() across paragraphs
<p>I have a document and it's got a variety of spans in it with the class .highlight on them. The first selected item also has .currentItem on it, indicating it's the one currently selected. I want to be able to browse to the next highlighted item when the user clicks a button. Here's the function that, best as I can tell, should work:</p>

<pre><code>function goNextHighlight() {
    var $active = $('.currentItem');
    var $next = $('.currentItem').next('.highlight');

    $active.removeClass('currentItem');
    $next.addClass('currentItem');
}
</code></pre>

<p>$active is being set properly, and it's removing the currentItem class from it. However, $next often doesn't work because the next highlighted item is in another div or paragraph. <a href="http://jsfiddle.net/qjsjt/" rel="nofollow">Here's a jsfiddle that shows the problem</a>. If you click on the next button twice, you'll see it works the first time, but not the second.</p>

<p>How do I make this work so that it'll go to the next matching .highlight, regardless of where in the document it is?</p>
