如何使用选择器使用箭头键来标记元素?

时间:2016-09-09 19:39:38

标签: javascript jquery html keyboard tabbing

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

使用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上。请参阅我的演示,了解我的实施:The fragment lolcycle

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

1 个答案:

答案 0 :(得分: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>