jQuery查找next和prev元素

我尝试找到当前元素的next或prev元素。但是next()和prev()函数只能在一个范围内工作，它不能到达外部。例如，这是我想要实现的：

<ul id="ul1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>
    <ul id="ul2">
      <li>4</li>
      <li>
        <ul id="ul3">
          <li>5</li>
          <li>6</li>
        </ul>
      </li>
      <li>7</li>
      <li>8</li>
    </ul>
  </li>
  <li>9</li>
</ul>

如果当前元素为ul1，则next元素为< li> 1< / li>，prev元素为null。

如果当前元素为< li> 1< / li>，则下一个元素为< li> 2< / li>，prev元素为ul1

如果当前元素为< li> 8< / li>，则下一个元素为< li> 9< / li>，prev元素为< li> 7< / li>

解决方法

首先，这是一个非常整洁的问题。感谢发帖！

我用一个链接的jQuery语句完成了这个。只有事情是，如果你运行上面的()顶部ul你会得到身体。我认为技术上有道理。但是，如果这不是所需的行为，请参阅下面的更新。

用法：next(“#ul3”)返回< li> 5< / li>

下一个：

function next(selector) {
    var $element = $(selector);

    return $element
        .children(":eq(0)")
        .add($element.next())
        .add($element.parents().filter(function() {
            return $(this).next().length > 0;
        }).next()).first();
}

以前：

function prevIoUs(selector) {
    var $element = $(selector);

    return $element
        .prev().find("*:last")   
        .add($element.parent())    
        .add($element.prev())
        .last();     
}

更新如果要限制以前最上方的节点可以，可以做：

function prevIoUs(selector,root) {
    var $element = $(selector);

    return $element
        .prev().find("*:last")   
        .add($element.parent())     
        .add($element.prev())
        .last().not($(root).parent());      
}

http://jsfiddle.net/andrewwhitaker/n89dz/

另一个更新：为了方便起见，这是一个jQuery插件

(function($) {
    $.fn.domNext = function() {
        return this
            .children(":eq(0)")
            .add(this.next())
            .add(this.parents().filter(function() {
                return $(this).next().length > 0;
            }).next()).first();        
    };

    $.fn.domPrevIoUs = function() {
        return this
            .prev().find("*:last")   
            .add(this.parent())     
            .add(this.prev())
            .last();         
    };
})(jQuery);

扩展示例：http://jsfiddle.net/andrewwhitaker/KzyAY/

原文地址：https://www.jb51.cc/jquery/181940.html