Databases
StackOverflow2013
Postsdbo
POjQuery nextAll won't stop at last element?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery nextAll won't stop at last element?
    text
    copied!<p>I have a list that has keyboard support for navigation. However, there is additional jiggery pokery (which isn't inlcuded in this example) that shows and hides items in the list. After items are hidden the keyboard navigation needs to continue functioning but only for visible items.</p> <p>I've got this working great. The problem occurs when the last visible item is the current item and then a user presses down again. The current class is removed and it tries to move on to an item that doesn't exist. The same thing happens when navigating up.</p> <p>How can I navigate visible items only and get it to stop on the first and last visible items?</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).keydown(function(e) { e.preventDefault(); if (e.keyCode == 38) { // Capture Arrow Up key 38 var currentItem = jQuery(".options").children("li.current").removeClass("current").prevAll(':visible:first').addClass("current"); } else if (e.keyCode == 40) { // Capture Arrow Down key 40 var currentItem = jQuery(".options").children("li.current").removeClass("current").nextAll(':visible:first').addClass("current"); } });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.current { border: solid 1px #f60 !important; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; &lt;ul class="options"&gt; &lt;li class="current"&gt;&lt;a href="#"&gt;&lt;span&gt;WW Portfolio Regions&lt;/span&gt;&lt;span class="hidden"&gt;0&lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;EMEA&lt;/span&gt;&lt;span class="hidden"&gt;1&lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Americas&lt;/span&gt;&lt;span class="hidden"&gt;2&lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;AP&lt;/span&gt;&lt;span class="hidden"&gt;3&lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;NE IOT&lt;/span&gt;&lt;span class="hidden"&gt;4&lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;SW IOT&lt;/span&gt;&lt;span class="hidden"&gt;5&lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;CCE IOT&lt;/span&gt;&lt;span class="hidden"&gt;6&lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;MEA IOT&lt;/span&gt;&lt;span class="hidden"&gt;7&lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt;</code></pre> </div> </div> </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload