如何使用 jquery 获取下一个/上一个链接，无论它在 DOM 中的位置如何？

Question

如何找到下一个或上一个 无论它位于 DOM 中的哪个位置？

当我按下键时，我想突出显示下一个 ，当我按下键时，我想突出显示前一个，无论它嵌套在 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');
});

Answer 2

按向下键，执行：

if($('a[cur="1"]').length==0) {
  $('a:first').attr('cur', "1");
  $('a:first').addClass('highlight');
  return false;
}

var previous = null, next = null;
$('a').each(function() {
  if(previous!=null && $(previous).attr('cur')=='1') {
    $(previous).removeAttr('cur');
    $(previous).removeClass('highlight');
    $(this).attr('cur', "1");
    $(this).addClass('highlight');
        return false;
  }
  previous = this;
}

按向上键，执行：

if($('a[cur="1"]').length==0) {
  $('a:first').attr('cur', "1");
  $('a:first').addClass('highlight');
  return false;
}

var previous = null;
$('a').each(function() {
  if($(this).attr('cur')=='1') {
    $(this).removeAttr('cur');
    $(this).removeClass('highlight');
    if(previous!=null) {
      $(this).attr('cur', "1");
      $(this).addClass('highlight');
    }
    else {
      $('a:last').attr('cur', "1");
      $('a:last').addClass('highlight');
    }
    return false;
  }
  previous = this;
}