Javascript - How to change focus on links in a list with keyboard arrow keys

Question

I'm able to change focus when the links are not wrapped in other elements. This works: HTML ``` Link Link Link ``` 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 ```

```

Accepted Answer

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

Javascript - How to change focus on links in a list with keyboard arrow keys

Solution

Problem