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 对象。您可以测试这种情况，并且仅在当前元素不是第一个(或最后一个)元素时才从当前元素中删除该类:

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