DOM内のどこに関係なく、jqueryを使って次の/前のリンクを取得するにはどうすればよいですか？

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に書く基本的なコードで、あなたが始めることができる持っているものです。ダウンキーで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

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

は、実行します。

キーアップに

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