title: How to use a selector to tab through elements using arrow keys?
body: <p>I am trying to navigate a series of elements with the arrow keys, which I can successfully do like so:</p>
  
  <p>Javascript:</p>
  
  <pre><code>$('div').keydown(function(e) {
    if (e.keyCode==39) {
      $('div').next(this).focus();
    }
    if (e.keyCode==37) {
      $('div').prev(this).focus();
    }
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div tabindex='0'&gt;
  a
  &lt;/div&gt;
  &lt;div tabindex='0'&gt;
  b
  &lt;/div&gt;
  &lt;div tabindex='0'&gt;
  c
  &lt;/div&gt;
  </code></pre>
  
  <p>But if I add an element in between two <code>divs</code>, like so:</p>
  
  <pre><code>&lt;div tabindex='0'&gt;
  a
  &lt;/div&gt;
  &lt;span tabindex='0'&gt;
  wat
  &lt;/span&gt;
  &lt;div tabindex='0'&gt;
  b
  &lt;/div&gt;
  &lt;div tabindex='0'&gt;
  c
  &lt;/div&gt;
  </code></pre>
  
  <p>The arrow keys do not skip the <code>span</code> and remain stuck on the second and third <code>divs</code>. Please see my demo for my implementation: <a href="http://jsfiddle.net/obliviga/a0uz64xw/5/" rel="nofollow">http://jsfiddle.net/obliviga/a0uz64xw/5/</a></p>
  
  <p>I basically want the focus with the arrow keys only to remain on a selector of my choice, so that the <code>span</code> is skipped. I'm not sure how to do this. Thanks.</p>