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

How can I get the next/prev link with jquery regardless of where it is in DOM?

本文关键字：DOM 位置 获取 jquery 何使用 下一个 链接 上一个      更新时间：2023-09-26

无论它放置在DOM中的哪个位置，我如何找到下一个或上一个<a>？

当我按下键时，我想突出显示下一个<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 = ???
        }
    });
});
这是我

在jsfiddle上编写的基本代码，你可以从开始。

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

爪哇语

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

在向下键上，执行以下操作：

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;
}
相关文章：