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元素为空。

如果当前元素为<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()分解为以下情况来解决问题：

元素有孩子 - ＆gt; next()是第一个孩子。
Element没有孩子，也不是最后一个孩子 - ＆gt; next()与jQuery的.next()
元素没有孩子，是最后一个孩子：
1. 查找不是最后一个孩子的最近父母 - ＆gt; 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应遵循..

Answer 3

根据您的数据集，您可以将整个事情弄平（假设$.find是稳定的，我相信它是这样的），如下所示：

var eles = [];
$("#ul1").find("li").each(function (e) {
    eles.push(e);
});

ele[3]之后的下一个元素是ele[4]，无论缩进程度如何。

示例http://jsfiddle.net/xRpmL/

jQuery找到next和prev元素

3 个答案: