Следующий элемент во всем документе после определенного элемента

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>

Если продолжить, то получим <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

Вот версия 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 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

Это должно работать. Не совсем уверен, что это полезно, хотя ...

;(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 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'