title: jquery cycle thru list one at a time when keypress
body: <p>I have a input box and below it, a basic list.  When you press arrow-down (or arrow-up) from within the input box, I'd like to highlight/change-background of the first list item (as if it was being selected).  </p>
  
  <pre><code>&lt;div&gt;&lt;input id="frmartist" type="text" value=""/&gt;&lt;/div&gt;
  &lt;ul id="artistlist"&gt;
      &lt;li id="artist-1"&gt;artist 1&lt;/li&gt;
      &lt;li id="artist-2"&gt;artist 2&lt;/li&gt;
      &lt;li id="artist-3"&gt;artist 3&lt;/li&gt;
      &lt;li id="artist-4"&gt;artist 4&lt;/li&gt;
      &lt;li id="artist-5"&gt;artist 5&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>If you press arrow-down again, the 2nd item would be highlighted.  If you press down again, the 3rd item would be highlighted. </p>
  
  <p>And if you were to press arrow-up, then the 2nd item would be highlighted again.  </p>
  
  <p>How can I control this behavior with jquery/javascript?  I'm guessing I should track which item is highlighted, but outside of that, I think I'm clueless.  </p>
  
  <p>I'm catching the arrow-up and arrow-down by using e.which === 40 and e.which === 38, but I'm confused as to where to go accessing the first item of the list.</p>
  
  <p>Any tips?</p>