jquery와 DOM의 관계에 관계없이 다음/이전 링크를 얻으려면 어떻게해야합니까?

Question

<a>은 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에 쓰기 기본 코드, 당신은 시작할 수있을 것입니다. 아래 키에 자바 스크립트

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