jQuery找到next和prev元素

Question

我试图找到当前元素的元素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,则下一个元素是<li>1</li>,prev元素为null.

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

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

Answer 1

首先,这是一个非常巧妙的问题.谢谢发帖!

我用链接的jQuery语句完成了这个.唯一的问题是,如果你previous()在顶部跑,ul你会得到body.我觉得技术上有道理.但是,如果这不是所需的行为,请参阅下面的更新.

用法: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/

Answer 2

多么有趣的问题!听起来你正在弄平HTML的递归结构,以便它可以循环 - 我可以看到它派上用场.

您可以通过分解.next()以下情况来解决问题:

1. 元素有孩子 - > next()是第一个孩子.
2. Element没有子节点,也不是最后一个子节点 - > next()与jQuery相同.next()
3. 元素没有孩子,是最后一个孩子:
   1. 找到不是最后一个孩子的最近父母 - > next()是父母的下一个兄弟
   2. 如果不存在这样的父 - > next()是null

代码将是(调用它flatNext来保留原始的jQuery .next行为):

$.fn.flatNext = function () {
   if (this.children().length) return this.children().eq(0);
   if (!this.is(":last-child")) return this.next();
   if (this.closest(":not(:last-child)").length)
       return this.closest(":not(:last-child)").next();
   return $([]); // Return empty jQuery object rather than null
};

并且$.fn.flatPrev应该遵循..