Question

这是对问题提出这么多次的变体。给定任何元素，我希望能够在整个文档中找到其后的任何元素。它可以是兄弟姐妹，但也可能是之后发生的任何其他元素。例如，给定以下标记，

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

继续，它将获得Another，然后是deep!，最后是last。

这样的事情存在吗？我不在乎它是选择器还是功能。我只需要这个功能。

编辑更新了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'标记

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

5 个答案:

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

5 个答案:

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