jQuery jQuery查找下一个和上一个元素

jQuery find next and prev element

提问by StoneHeart

I try to find a nextor prevelement of current element. But next()and prev()function can only work in a scope, it can not reach outside. For an example this is what I want to achieve:

我试图找到当前元素的一个next或prev元素。但是next()andprev()函数只能在一个作用域内工作，不能到达外部。例如，这就是我想要实现的目标：

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

If current element is ul1, next element is <li>1</li>, prev element is null.

如果当前元素为ul1，则下一个元素为，上一个<li>1</li>元素为空。

If current element is <li>1</li>, next element is <li>2</li>, prev element is ul1

如果当前元素是<li>1</li>，下一个元素是<li>2</li>，上一个元素是ul1

If current element is <li>8</li>, next element is <li>9</li>, prev element is <li>7</li>

如果当前元素是<li>8</li>，下一个元素是<li>9</li>，上一个元素是<li>7</li>

采纳答案by Andrew Whitaker

First of all, this was a really neat problem. Thanks for posting!

首先，这是一个非常巧妙的问题。感谢发布！

I accomplished this with a chained jQuery statement. Only thing is, if you run previous()on the top ulyou'll get body. Which I think technically makes sense. However, if this isn't the desired behavior, see my update below.

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

Usage: next("#ul3")returns <li>5</li>

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

Next:

下一个：

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

Previous:

以前的：

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

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

UpdateIf you want to limit the upper most node previous can be, you could do:

更新如果你想限制之前的最高节点，你可以这样做：

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/

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

Another Update: Here's a jQuery plugin for convenience:

另一个更新：为了方便起见，这里有一个 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);

Expanded example here: http://jsfiddle.net/andrewwhitaker/KzyAY/

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

回答by David Tang

What an interesting problem! Sounds like you're flattening the recursive structure of HTML so that it's loop-able - I can see it coming in handy.

多么有趣的问题！听起来您正在压平 HTML 的递归结构，以便它可以循环使用 - 我可以看到它派上用场。

You can solve the problem by breaking .next()down into the following cases:

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

1. Element has children --> next()is the first child.
2. Element has no children, and is not the last child --> next()is the same as jQuery's .next()
3. Element has no children, is last child:
   1. Find closest parent that is not the last child --> next()is that parent's next sibling
   2. If no such parent exists --> next()is null

1. 元素有孩子 -->next()是第一个孩子。
2. 元素没有子元素，也不是最后一个子元素 -->next()与 jQuery 的相同.next()
3. 元素没有孩子，是最后一个孩子：
   1. 找到不是最后一个孩子的最接近的父母 -->next()是该父母的下一个兄弟姐妹
   2. 如果不存在这样的父级 -->next()是null

Code would be (calling it flatNextto preserve original jQuery .nextbehaviour):

代码将是（调用它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
};

And $.fn.flatPrevshould follow..

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

回答by Brian M. Hunt

Depending on your data set, you could just flatten the whole thing (presuming $.findis stable, which I believe it is), like this:

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

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

The next element after ele[3]is ele[4]regardless of the level of indentation.

接下来的元素之后ele[3]是ele[4]不管缩进的水平。

Example http://jsfiddle.net/xRpmL/

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