Belirli öğe sonra * tüm * belgedeki sonraki öğe

Question

Bu, birçok kez sorulan sorudaki bir varyasyondur. Herhangi bir eleman verildiğinde, belgesinin tamamında belgesinin tamamında başka bir öğe bulabilmek istiyorum. Bir kardeş olabilir ama daha sonra ortaya çıkan başka bir element de olabilir. Örneğin, ben $.fn.nextInDocument denir arıyorum işlevini Diyelim Bu açıklamanın uğruna aşağıdaki işaretlemeyi

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

verilen. Aradım edin:

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

Devam edersek, bu <p>Another</p> ardından <p>deep!</p> ve son olarak <p>last</p> tanınacak.

Böyle bir şey var mı? Bir seçici mi yoksa bir işlev mi olduğu umurumda değil. Sadece işlevselliğe ihtiyacım var.

EDIT Daha fazla zorlu bir soru haline getirmek için DOM yapısını, aradığım şey için daha net hale getirmek üzere güncelledik.

Answer 1

? Sırayla düğümleri çaprazlamak ve her birini jQuery seçicisine karşı test etmek için DOM yöntemlerini kullanan genel bir çözümdür.

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

Çalışması gerekir. ... o da, yararlıdır değil gerçekten emin

;(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: my kodu 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

almak görünüm:

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/

değişim start+X ve bir sonraki 's' etiketi Burada

Answer 5

bir POJS versiyonu alacak: Bu nasıl hakkında

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