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

jQuery nextAll不会停在最后一个元素？

1 个答案: