Elemento successivo in * intero * documento dopo un determinato elemento

Question

Questa è una variazione su una domanda posta tante volte. Dato qualsiasi elemento, voglio essere in grado di trovare qualsiasi altro elemento dopo di esso nell'intero documento. Può essere un fratello ma potrebbe anche essere qualsiasi altro elemento che si verifica in seguito. Ad esempio, dato il seguente 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> 

Per il bene di questa descrizione, diciamo la funzione sto cercando è chiamato $.fn.nextInDocument. Se ho chiamato:

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

Proseguendo, si otterrebbe <p>Another</p>, quindi <p>deep!</p> e infine <p>last</p>.

Esiste qualcosa del genere? Non mi interessa se si tratta di un selettore o di una funzione. Ho solo bisogno della funzionalità.

EDIT Aggiornato la struttura DOM per renderlo una domanda più stimolante e ancora più chiara per quello che sto cercando.

Answer 1

ne dici di questo? È una soluzione generica che utilizza i metodi DOM per attraversare a turno i nodi e testa ciascuno contro il selettore 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

Questo dovrebbe funzionare. Non proprio sicuro che sia utile, anche se ...

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

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

prendere un'occhiata al mio codice:

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/

cambiamento start+X e si otterrà il prossimo tag 'p'

Answer 5

Ecco una versione 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; 
     } 
    } 
    } 
}