Как использовать селектор для перемещения по элементам с помощью клавиш со стрелками?

Question

Я пытаюсь перемещаться по ряду элементов с помощью клавиш со стрелками, что я могу успешно сделать так:

Javascript:

$('div').keydown(function(e) {
  if (e.keyCode==39) {
    $('div').next(this).focus();
  }
  if (e.keyCode==37) {
    $('div').prev(this).focus();
  }
});

HTML:

<div tabindex='0'>
a
</div>
<div tabindex='0'>
b
</div>
<div tabindex='0'>
c
</div>

Но если я добавлю элемент между двумя divs, вот так:

<div tabindex='0'>
a
</div>
<span tabindex='0'>
wat
</span>
<div tabindex='0'>
b
</div>
<div tabindex='0'>
c
</div>

Клавиши со стрелками не пропускают span и застрять на втором и третьем divs, Пожалуйста, посмотрите мою демонстрацию для моей реализации: http://jsfiddle.net/obliviga/a0uz64xw/5/

Я в основном хочу, чтобы фокус с клавишами со стрелками оставался только на выбранном мной селекторе, чтобы span пропущен Я не уверен, как это сделать. Благодарю.

Answer 1

Вам нужно использовать nextAll() а также prevAll() вместе с :first псевдо-класс селектор с prev() а также next() выбирает только ближайшего соседа. куда :first помогает получить ближайший из коллекции.

$('div').keydown(function(e) {
  if (e.keyCode==39) {
    $(this).nextAll('div:first').focus();
  }
  if (e.keyCode==37) {
    $(this).prev('div:first').focus();
  }
});

$('div').keydown(function(e) {
  if (e.keyCode == 39) {
    $(this).nextAll('div:first').focus();
  }
  if (e.keyCode == 37) {
    $(this).prevAll('div:first').focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div tabindex='0'>
  a
</div>
<span tabindex="0">
wat
</span>
<div tabindex='0'>
  b
</div>
<div tabindex='0'>
  c
</div>