*整个*文档中某个元素之后的下一个元素

Question

这是一个被问了很多次的问题的变体。给定任何元素，我希望能够在 entire 文档中找到它之后的任何其他元素。它可以是兄弟，但也可以是之后出现的任何其他元素。例如，给定以下标记，

<div>
    <p>Hello</p>
    <div>
        <p>Foo</p>
        <p class="bar">Bar</p>
        <p>rawr!</p>
    </div>
    <p>bop</p>
    <input/>
    <div>
        <p>Another</p>
        <div>
            <span>something</span>
            <p>deep!</p>
        </div>
    </div>
</div>
<p>last</p>

为了便于描述，假设我正在寻找的函数称为$.fn.nextInDocument。如果我打电话：

$('.bar').nextInDocument('p'); //  <p>rawr</p>
$('.bar').nextInDocument('p').nextInDocument('p'); //  <p>bop</p>

继续，它会得到<p>Another</p>，然后是<p>deep!</p>，最后是<p>last</p>。

这样的东西存在吗？我不在乎它是选择器还是函数。我只需要功能。

编辑更新了 DOM 结构，使其成为一个更具挑战性的问题，但更清楚我要寻找的内容。

Answer 1

这个怎么样？这是一个通用的解决方案，它使用 DOM 方法依次遍历节点并针对 jQuery 选择器测试每个节点。

jsFiddle：http://jsfiddle.net/PsEdZ/3/

(function($) {
    function nextNode(node, omitChildren) {
        var sibling, parentNode;
        if (!omitChildren && node.hasChildNodes()) {
            return node.firstChild;
        } else {
            sibling = node.nextSibling;
            if (sibling) {
                return sibling;
            } else {
                parentNode = node.parentNode;
                return parentNode ? nextNode(parentNode, true) : null;
            }
        }
    }

    $.fn.nextInDocument = function(selector) {
        var node = this[0], $node;
        while ( (node = nextNode(node)) ) {
            $node = $(node);
            if ($node.is(selector)) {
                return $node;
            }
        }
        return null;
    }
})(jQuery);

Answer 2

这应该可行。虽然不确定它是否有用......

;(function ($)
{
    $.fn.nextInDocument = function (s)
    {
        var self = this,
            next;
        do
        {
            next = self.nextAll(s).first();
            self = self.parent();
        }
        while (self.length && !next.length);

        return next;
    };
})(jQuery);

演示：http://jsfiddle.net/mattball/HAFn8/

Answer 3

(function(jQuery) {
jQuery.fn.extend({
    nextInDocument: function(a) {
        if (jQuery(this).next(a).length === 0) {
            //console.log($(this).parent().nextInDocument('p'));
            jQuery(this).parent().nextInDocument(a);
        }
        else
            return jQuery(this).next(a);
    }
});
})(jQuery);

Answer 4

这是一个 POJS 版本：

function nextInDocument(el, tagName) {
  var node, nodes = document.getElementsByTagName('*');
  var start = false;
  tagName = tagName.toLowerCase();

  for (var i=0, iLen=nodes.length; i<iLen; i++) {
    node = nodes[i];
    if (!start) {
      if (node == el) start = true;
    } else {
      if (node.tagName.toLowerCase() == tagName) {
        return node;
      }
    }
  }
}

Answer 5

看看我的代码：

HTML

<div>
    <p>Hello</p>
    <div> 
        <p>Foo</p>
        <p>Fooooo</p>
        <p class="bar">Bar</p>
        <p>rawr!</p>
    </div>
    <p>bop</p>
    <input/>
    <div>
        <p>Another</p>
    </div>
</div>
<p>last</p>

<a class="show" href="#">!!!</a>

JS

$(function() {
    i = 0;
    start = 0;
    $('p').each(function() {
        if ($(this).hasClass('bar')) {
            start = i;
        }
        i++;
    });
    $('a.show').click( function(){
        alert($('p').eq(start+4).text());
    });
});

http://jsfiddle.net/mV8pm/

更改start+X，你会得到下一个'p'标签