Geek Answers Handbook

The next item in the * complete * document after the specific item

This is a variation of the question asked so many times. For any item, I want to find any other item after it in the entire document. It can be a sibling, but it can be any other element that arises after that. For example, given the following markup,

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

For this description, let's say the function I'm looking for is called $.fn.nextInDocument. If I called:

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

Continuing, he will receive <p>Another</p>, then, <p>deep!</p>and finally <p>last</p>.

Is there something similar? I don't care if this is a selector or function. I just need functionality.

EDIT The DOM structure has been updated to make it a more complex question, but more understandable for what I'm looking for.

+5
5

? , 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);
+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/

+1
(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);
+1
source

Here is the POJS version:

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;
      }
    }
  }
}
+1
source

take a look at my code:

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/

change start+Xand you will get the following tag 'p'

0
source

More articles:


All Articles