3

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();       
        }
    }
);

Demo Fiddle

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> 

3 Answers 3

5

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();   
    }

DEMO

1
if (e.keyCode == 40) {      
  $(".move:focus").parent().next().find('a').focus();   
}
if (e.keyCode == 38) {      
  $(".move:focus").parent().prev().find('a').focus();   
}
1

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.