2010-09-24 14 views
23

esiste un metodo cheep per selezionare il figlio più profondo di un elemento?seleziona il figlio più profondo in jQuery

Esempio:

<div id="SearchHere"> 
    <div> 
    <div> 
     <div></div> 
    </div> 
    </div> 
    <div></div> 
    <div> 
    <div> 
     <div> 
     <div id="selectThis"></div> 
     </div> 
    </div> 
    </div> 
    <div> 
    <div></div> 
    </div> 
</div> 
+0

non vuole essere una critica, ma sono affascinato da questo che ci si vuole? –

+1

Per tutti quelli che stanno scoprendo questo attraverso i motori di ricerca, ho aggiornato l'essenza di jonathan con la versione migliorata di patrick dw. Anche un po 'ampliato le istruzioni. Puoi trovarlo qui: [jQuery deepest plugin gist] (https://gist.github.com/1014671 "jQuery deepest plugin gist") –

risposta

27

EDIT: Questo è probabilmente un approccio migliore rispetto la mia risposta originale:

Esempio:http://jsfiddle.net/patrick_dw/xN6d5/5/

var $target = $('#SearchHere').children(), 
    $next = $target; 

while($next.length) { 
    $target = $next; 
    $next = $next.children(); 
} 

alert($target.attr('id')); 

o del presente che è ancora un Poco più corto:

Esempio:http://jsfiddle.net/patrick_dw/xN6d5/6/

var $target = $('#SearchHere').children(); 

while($target.length) { 
    $target = $target.children(); 
} 

alert($target.end().attr('id')); // You need .end() to get to the last matched set 

risposta originale:

Ciò sembra funzionare:

Esempio:http://jsfiddle.net/xN6d5/4/

Se si sa che il più profondo sarà un determinato tag (o qualcos'altro), è possibile accelerarlo sostituendo .find('*') con .find('div') per esempio.

EDIT: aggiornato solo controllare se la lunghezza dell'elemento corrente fa non hanno una firstChild o se lo fa, che il firstChild non è un nodo di tipo 1.

+1

Fantastico! Funziona perfettamente! L'ho anche incapsulato in un plugin jQuery. Qui: https://gist.github.com/714851 – Jonathan

+0

@jonathanconway - Aggiornato la mia risposta con quella che è probabilmente una versione più efficiente. – user113716

+2

@ user113716 Ho realizzato anche una versione più corta http://jsfiddle.net/xN6d5/44/ :) – EaterOfCode

3

non credo che si può fare direttamente, ma si può provare

var s = "#SearchHere"; 
while($(s + " >div ").size() > 0) 
    s += " > div"; 
alert($(s).attr('id')); 
5

Ecco un leggero miglioramento sulla risposta da @ user113716, questa versione gestisce il caso in cui non ci sono bambini e restituisce il bersaglio si.

(function($) { 

    $.fn.deepestChild = function() { 
     if ($(this).children().length==0) 
      return $(this); 

     var $target = $(this).children(), 
     $next = $target; 

     while($next.length) { 
      $target = $next; 
      $next = $next.children(); 
     } 

     return $target; 
    }; 

}(jQuery)); 
+0

+1, perché dovevo semplicemente copiare/incollare per ottenere esattamente ciò di cui ho bisogno, ottenere oggetti nidificati o solo oggetti iniziali. Grazie! – Georgio

1

Questo one-liner concatenabile ha funzionato per me, ma presuppone che ci sia solo un nodo foglia nella gerarchia sottostante.

jQuery("#searchBeginsHere") 
    .filter(function(i,e){ return jQuery(e).children().size() === 0; }) 
0

Versione per ottenere il più profondo per ogni foglia.

http://jsfiddle.net/ncppk0zw/14/

var found = $('#SearchHere *'); 

for (var i = 0; i < found.length; i++) { 
    if (i > 1) { 
     if (found[i].parentNode !== found[i-1]) { 
      // Deepest. Next element is other leaf 
      console.log(found[i-1]); 
      continue; 
     } 
     if (i == found.length-1) { 
      // Deepest. Last element in DOM tree 
      console.log(found[i]); 
     } 
    } 
} 
Problemi correlati