jQuery nextAll不會停在最後一個元素？

Question

我有一個支持導航的鍵盤列表。但是，在該列表中顯示並隱藏項目的附加jiggery pokery（在本例中未包含）。隱藏項目後，鍵盤導航需要繼續運行，但僅適用於可見項目。

我有這個工作很好。當最後一個可見項目是當前項目，然後用戶再次按下時，會發生問題。當前類將被刪除，並嘗試轉移到不存在的項目。導航時會發生同樣的事情。

我怎樣才能瀏覽可見項目，並讓它停在第一個和最後一個可見項目上？

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可以測試這種情況下，只有從當前元素去掉類，如果它不是第一個（或最後一個）：

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