title: Javascript - How to change focus on links in a list with keyboard arrow keys
body: <p>I'm able to change focus when the links are not wrapped in other elements.</p>
  
  <p>This works:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;a id="first" href="#" class='move'&gt;Link&lt;/a&gt;
  &lt;a href="#" class='move'&gt;Link&lt;/a&gt;
  &lt;a href="#" class='move'&gt;Link&lt;/a&gt;
  </code></pre>
  
  <p>JS (with jQuery)</p>
  
  <pre><code>$(document).keydown(
      function(e)
      {    
          // Down key
          if (e.keyCode == 40) {      
              $(".move:focus").next().focus();       
          }
  
          // Up key
          if (e.keyCode == 38) {      
              $(".move:focus").prev().focus();       
          }
      }
  );
  </code></pre>
  
  <p><a href="http://jsfiddle.net/HoffZ/WWQPR" rel="nofollow">Demo Fiddle</a></p>
  
  <p>But how do I achieve the same thing when the links are inside a list for example? Like this</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;a id="first" href="#" class='move'&gt;Link&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#" class='move'&gt;Link&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#" class='move'&gt;Link&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt; 
  </code></pre>