title: Why can't .next('li:visible') or .prev('li:visible') not skip invisible elements?
body: <p>I am making a selection control that displays a list of options in an 'li' and allows the user to scroll up and down through the li's. Since the li's can be filtered sometimes they will be rendered invisible through a '.hide' giving me the following markup:</p>
  
  <pre><code>&lt;input type="text" id="comboBox" /&gt;
  &lt;ul id="comboBoxData"&gt;
      &lt;li style="display:none"&gt;1&lt;/li&gt;
      &lt;li&gt;12&lt;/li&gt;
      &lt;li&gt;123&lt;/li&gt;
      &lt;li&gt;1234&lt;/li&gt;
      &lt;li style="display:none"&gt;12345&lt;/li&gt;
      &lt;li style="display:none"&gt;123456&lt;/li&gt;
      &lt;li&gt;1234567&lt;/li&gt;
      &lt;li&gt;12345678&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have the following JQuery code to handle the arrow key controls:</p>
  
  <pre><code>$('#comboBox').bind('keypress', function(e) {
      if (e.keyCode &gt;= 38 &amp;&amp; e.keyCode &lt;= 41) {
          if ($("#comboBoxData li.selected").length &gt; 0) {
              var current = $("#comboBoxData li.selected");
              if (e.keyCode == 38) {
                  $("#comboBoxData li.selected").prev('li:visible').addClass('selected');
              } else if (e.keyCode == 40) {
                  $("#comboBoxData li.selected").next('li:visible').addClass('selected');
              }
              current.removeClass('selected');
          } else {
              $("#comboBoxData li:visible:first").addClass('selected');
          }
          $("#comboBox").val($("#comboBoxData li.selected").html());
      }
  });
  </code></pre>
  
  <p>with the following CSS to clearly mark which element I have selected:</p>
  
  <pre><code>.selected
  {
      background-color:Navy;
      color:White;
  }
  </code></pre>
  
  <p>My problem is this, in the exampel that I'm giving when the user presses the 'down' button the LI for '12' is being selected and the up and down buttons work correctly for '12' down to '1234' however there they stop and cannot find the '1234567' because of the gap of the two li's that are set to 'display:none'. is there a way around this? maybe an alternative to .next() and .previous()?</p>