Как я могу получить следующую / предыдущую ссылку с jquery независимо от того, где она находится в 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');
});

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