javascript - 如何使用选择器使用箭头键在元素之间切换？

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/oblivig/a0uz64xw/5/

我基本上希望箭头键的焦点只保留在我选择的选择器上，以便span跳过。我不知道该怎么做。谢谢。

Answer 1

您需要使用nextAll()andprevAll()和: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>