jQuery nextAll не остановится на последнем элементе? - PullRequest
Новая
       6

jQuery nextAll не остановится на последнем элементе?

2 голосов
/ 01 июля 2011

У меня есть список с поддержкой клавиатуры для навигации.Тем не менее, есть дополнительные покерные jiggery (который не включен в этом примере), который показывает и скрывает элементы в списке.После того, как элементы скрыты, навигация клавиатуры должна продолжаться, но только для видимых элементов.

У меня это отлично работает.Проблема возникает, когда последний видимый элемент является текущим, а затем пользователь снова нажимает.Текущий класс удаляется, и он пытается перейти к элементу, который не существует.То же самое происходит при навигации вверх.

Как я могу перемещаться только по видимым элементам и заставить его останавливаться на первом и последнем видимых элементах? 

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>

1 Ответ

1 голос
/ 01 июля 2011

Если текущий элемент является последним, 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");
        }
    }
});
...