title: Iterate through array and jump to next item on keypress
body: <p>I have an array with letters that I want to iterate with up and down keys and then choose a letter with enter and jump to next with enter but I have no idea how to achieve that.
  So far I've got this:</p>
  
  <pre><code>var i = 0;
  
  var letters = ['a','b','c','d','e']
  
  $(document).ready(function() {
    $(document).keypress(function(e) {
  
      e.preventDefault();
  
      var keyCode = e.which;
          arrow = {up: 38, down: 40, enter: 13};
  
      switch(e.keyCode)
      {
          case arrow.up:
              alert('up');
          break;
  
          case arrow.down:
              alert('down');
          break;
  
          case arrow.enter:
              $('#box').html(letters[++i % letters.length]);
          break;
      }
  });
  });
  </code></pre>
  
  <p>So my first question is:
  This goes through the array on enter key, but I can't change the key value. If I want to make the down key iterate the array, nothing happens, what do I do wrong?
  And the second: how can I do to jump to a new letter on keypress?</p>
  
  <p>Update:</p>
  
  <p>Okey, now I'm closer to what I wanted:</p>
  
  <pre><code>case arrow.up:
              $('#letterbox').html(letters[--i % letters.length]);
          break;
  
          case arrow.down:
              $('#box').html(letters[++i % letters.length]);
          break;
  
          case arrow.enter:
              $('#box2').html(letters[++i % letters.length]);
          break;
  </code></pre>
  
  <p>The up and down key iterates through the array and the enter prints a new letter to the div <code>'#box2'</code> but it continues to iterate the first box. How can I make the array iterate from the current box?</p>