我正在尝试使用箭头键导航一系列元素,我可以成功地这样做:
使用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
上。请参阅我的演示,了解我的实施:
我基本上希望使用箭头键的焦点仅保留在我选择的选择器上,以便跳过span
。我不知道该怎么做。感谢。
答案 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>