Я хочу перемещаться с помощью клавиш со стрелками в списке, который содержит ссылки того же класса, заключенные в some li, примерно так:
<ul>
<li class="linkTitle">LINKS BELOW</li>
<li class="linkHolder"><a class="link">LINK</a></li>
<li class="linkHolder"><a class="link">LINK</a></li>
<li class="linkTitle">LINKS BELOW</li>
<li class="linkHolder"><a class="link">LINK</a></li>
<li class="linkHolder"><a class="link">LINK</a></li>
<li class="linkHolder"><a class="link">LINK</a></li>
<li class="linkHolder"><a class="link">LINK</a></li>
</ul>
Приведенный ниже код отлично работает для непрерывных ссылок и циклически перемещается вверх или вниз по списку, однако он ломается при столкновении с li, который не содержит ссылки.
$(function() {
var $li = $('li'),
$move = $(".move").click(function () {
this.focus();
});
$(document).keydown(function(e) {
if (e.keyCode == 40 || e.keyCode == 38) {
var inc = e.keyCode == 40 ? 1 : -1,
move = $move.filter(":focus").parent('li').index() + inc;
$li.eq(move % $li.length).find('.move').focus();
}
});
$move.filter(':first').focus();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li>
<a href="#" class='move'>Link</a>
</li>
<li>
<a href="#" class='move'>Link</a>
</li>
<li>
<a href="#" class='move'>Link</a>
</li>
<li>
<a href="#" class='move'>Link</a>
</li>
<li>
<a href="#" class='move'>Link</a>
</li>
<li>
<a href="#" class='move'>Link</a>
</li>
</ul>Я пытался, но не могу заставить его работать с несмежными ссылками. Решение, в котором вы можете перемещаться (и циклически) только по ссылкам одного класса, независимо от количества и положения несвязанных li в списке, было бы мне по душе!
ОБНОВЛЕНИЕ
Вот DEMO над чем я работаю, UP Клавиша со стрелкой работает по назначению, но останавливает фокус один раз в верхней части списка. Клавиша со стрелкой ВНИЗ перемещает фокус вниз списка. Циклическое переключение по ссылкам тоже не работает. В этом примере, nextAll() и prevAll(), похоже, делают свое дело, когда встречают li без ссылки.
