我怎样才能获得jquery的下一个/ prev链接,无论它在DOM中的位置如何？

Question

我怎样才能找到下一个或上一个,<a>无论它放在DOM中的哪个位置？

当我按下键时,我想突出显示下一个<a>,当我按下时我想突出显示前一个,无论它嵌套在DOM中的哪个位置.

<div id="info">
    <span><a href="#info">How can I get this when pressing up?</a></span>
    <a class="focus" href="#home">I'm here - and will either press up or down</a>
    <div>
        <ul>
            <li><a href="#foo">How can I get this when pressing down?</a></li>
            <li><a href="#bar">Another link</a></li>
        </ul>
    </div>  
</div>

我已经试过next(),nextAll(),prev()并prevAll() 与运气.

这就是我到目前为止所拥有的

$(document).keypress(e){
    var keyCode = e.keyCode;
    switch (keyCode) {
        case 38:
            e.preventDefault();
            $("body").trigger('nav', 'up');
            break;
        case 40:
            e.preventDefault();
            $("body").trigger('nav', 'down');
            break;
    }

    $("body").bind('nav', function(direction){
        var currentLink = $(".focus").first();

        if(direction === 'up'){
            var prevLink = ???
        } else if (direction === 'down'){
            var nextLink = ???
        }
    });
});

Answer 1

这是我在jsfiddle上编写的基本代码,你可以从这开始.

http://jsfiddle.net/sabri/skXZT/10/

使用Javascript

var allLink = jQuery('a');
var currentHighLight = allLink.filter('.highlight');

$('body').keyup(function(event) {
    index = allLink.index(currentHighLight);
    currentHighLight.removeClass('highlight');
    if (event.which == 38) {
       allLink.eq(index-1).addClass('highlight')

    } else if (event.which == 40) {
       allLink.eq(index+1).addClass('highlight')
    }
    currentHighLight = allLink.filter('.highlight');
});