jQuery nextAllは最後の要素で停止しませんか？

Question

私はナビゲーションのキーボードサポートを持ったリストを持っています。しかし、リスト内の項目を表示したり隠したりする追加のジガーポケリー（この例では表示されていない）があります。項目が隠された後、キーボードナビゲーションは機能し続ける必要がありますが、目に見える項目のみが必要です。

私はこれをうまく使っています。この問題は、最後に表示された項目が現在の項目であり、ユーザがもう一度押すと発生します。現在のクラスが削除され、存在しない項目に移動しようとします。上をナビゲートするときも同じことが起こります。

表示されているアイテムのみをナビゲートし、最初と最後の表示アイテムで停止するにはどうすればよいですか？

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"); 
 
    } 
 
});

.current { 
 
    border: solid 1px #f60 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="options"> 
 
    <li class="current"><a href="#"><span>WW Portfolio Regions</span><span class="hidden">0</span></a> 
 
    </li> 
 
    <li><a href="#"><span>EMEA</span><span class="hidden">1</span></a> 
 
    </li> 
 
    <li><a href="#"><span>Americas</span><span class="hidden">2</span></a> 
 
    </li> 
 
    <li><a href="#"><span>AP</span><span class="hidden">3</span></a> 
 
    </li> 
 
    <li><a href="#"><span>NE IOT</span><span class="hidden">4</span></a> 
 
    </li> 
 
    <li><a href="#"><span>SW IOT</span><span class="hidden">5</span></a> 
 
    </li> 
 
    <li><a href="#"><span>CCE IOT</span><span class="hidden">6</span></a> 
 
    </li> 
 
    <li><a href="#"><span>MEA IOT</span><span class="hidden">7</span></a> 
 
    </li> 
 
</ul>

Answer 1

現在の要素が最後のものである場合には、nextAll()は空のjQueryのobject.Youは、そのような場合のためにテストし、唯一それが最初ではない場合は、現在の要素からクラスを削除することができます返されます（または最後の）1つ：

jQuery(document).keydown(function(e) { 
    var currentItem = jQuery(".options").children("li.current"); 
    if (e.keyCode == 27) {   // Capture Esc key 27 
     e.preventDefault(); 
     closeOptions(ddOptions, thisDd); 
    } else if (e.keyCode == 38) { // Capture Arrow Up key 38 
     e.preventDefault();   
     var prevItem = currentItem.prevAll(":visible:first"); 
     if (prevItem.length) { 
      currentItem.removeClass("current"); 
      prevItem.addClass("current"); 
     } 
    } else if (e.keyCode == 40) { // Capture Arrow Down key 40 
     e.preventDefault();   
     var nextItem = currentItem.nextAll(":visible:first"); 
     if (nextItem.length) { 
      currentItem.removeClass("current"); 
      nextItem.addClass("current"); 
     } 
    } 
});