Javascript 如何使用选择器使用箭头键在元素之间进行制表？

我正在尝试使用箭头键导航一系列元素，我可以成功地这样做：

Javascript:

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

HTML:

箭头键不会跳过

span

，而是停留在第二个和第三个

div

上。有关我的实现，请参见我的演示：

我基本上希望箭头键的焦点只保留在我选择的选择器上，以便跳过

span

。我不知道该怎么做。谢谢。

您需要使用和以及伪类选择器，因为和只选择紧邻的兄弟。其中帮助从集合中获取最近的一个

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

$（'div'）。向下键（函数（e）{
如果（e.keyCode==39）{
$（this.nextAll（'div:first'）.focus（）；
}
如果（e.keyCode==37）{
$（this.prevAll（'div:first'）.focus（）；
}
});

A.
沃特
B
C

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

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