Javascript - How to change focus on links in a list with keyboard arrow keys
10,737
Solution 1
You can use .closest() to find the parent element then use .next() to get the next li, then use .find() to get the next .move
if (e.keyCode == 40) {
$(".move:focus").closest('li').next().find('a.move').focus();
}
// Up key
if (e.keyCode == 38) {
$(".move:focus").closest('li').prev().find('a.move').focus();
}
Solution 2
if (e.keyCode == 40) {
$(".move:focus").parent().next().find('a').focus();
}
if (e.keyCode == 38) {
$(".move:focus").parent().prev().find('a').focus();
}
Solution 3
If you happen to want your focus to cycle when reaching the end of the list, you can do something like this:
var $li = $('li'),
$move = $(".move").click(function () {
this.focus();
});
$(document).keydown(function(e) {
if (e.keyCode == 40 || e.keyCode == 38) {
var inc = e.keyCode == 40 ? 1 : -1,
move = $move.filter(":focus").parent('li').index() + inc;
$li.eq(move % $li.length).find('.move').focus();
}
});
$move.filter(':first').focus();
Demo: http://jsfiddle.net/WWQPR/5/
Author by
HoffZ
Updated on June 05, 2022Comments
-
HoffZ almost 2 years
I'm able to change focus when the links are not wrapped in other elements.
This works:
HTML
<a id="first" href="#" class='move'>Link</a> <a href="#" class='move'>Link</a> <a href="#" class='move'>Link</a>
JS (with jQuery)
$(document).keydown( function(e) { // Down key if (e.keyCode == 40) { $(".move:focus").next().focus(); } // Up key if (e.keyCode == 38) { $(".move:focus").prev().focus(); } } );
But how do I achieve the same thing when the links are inside a list for example? Like this
<ul> <li> <a id="first" href="#" class='move'>Link</a> </li> <li> <a href="#" class='move'>Link</a> </li> <li> <a href="#" class='move'>Link</a> </li> </ul>