jquery next() and elements that aren't necessarily next to each other
<p>I know there are other questions on the subject, but I haven't been able to get any of the to work, so I'll ask again:</p>

<p>I have an html list that looks like this:</p>

<pre><code>&lt;ul&gt;
  &lt;li&gt;Item one&lt;/li&gt;
  &lt;li&gt;Item two&lt;/li&gt;
  &lt;li&gt;Item three&lt;/li&gt;
  &lt;li&gt;Item four&lt;/li&gt;
  &lt;li&gt;Item five&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Using jQuery some of the li tags are hidden, and some are visible using .show() and .hide() e.g.</p>

<pre><code>&lt;ul&gt;
  &lt;li style="display: block"&gt;Item one&lt;/li&gt;
  &lt;li style="display: none"&gt;Item two&lt;/li&gt;
  &lt;li style="display: none"&gt;Item three&lt;/li&gt;
  &lt;li style="display: block"&gt;Item four&lt;/li&gt;
  &lt;li style="display: block"&gt;Item five&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I've also go another bit of jQuery which adds a class to one of the li tags so the code looks like this (the code will only ever add this class to a visible li):</p>

<pre><code>&lt;ul&gt;
  &lt;li style="display: block" class="highlight"&gt;Item one&lt;/li&gt;
  &lt;li style="display: none"&gt;Item two&lt;/li&gt;
  &lt;li style="display: none"&gt;Item three&lt;/li&gt;
  &lt;li style="display: block"&gt;Item four&lt;/li&gt;
  &lt;li style="display: block"&gt;Item five&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>What I then need to do is when an event happens (in this case the user hits the down key) I want the li with the class to remove it's class and add the class to the next visible li. I would have thought that this would do it:</p>

<pre><code>if (event.keyCode == '40') {
  $('li.highlight').removeClass('highlight').next(':visible').addClass('highlight');
}
</code></pre>

<p>But this only works if the next visible li is the next li anyway. How can I get it to choose the correct element in all cases?</p>
