Wählen Sie das tiefste Kind in jQuery

Question

Gibt es eine billige Methode, um das tiefste Kind eines Elements auszuwählen?

Beispiel:

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

Answer 1

EDIT: Dies ist wahrscheinlich ein besserer Ansatz als meine ursprüngliche Antwort:

Beispiel: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')); 

oder das was noch ein etwas kürzer:

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

---

Ursprüngliche Antwort:

Beispiel:

Diese scheinen würde arbeitenhttp://jsfiddle.net/xN6d5/4/

var levels = 0; 
var deepest; 

$('#SearchHere').find('*').each(function() { 
    if(!this.firstChild || this.firstChild.nodeType !== 1 ) { 
     var levelsFromThis = $(this).parentsUntil('#SearchHere').length; 
     if(levelsFromThis > levels) { 
      levels = levelsFromThis; 
      deepest = this; 
     } 
    } 
}); 

alert(deepest.id); 

Wenn Sie wissen, dass das tiefste ein bestimmtes Tag (oder etwas anderes) sein wird, könnten Sie es beschleunigen, indem Sie zum Beispiel .find('*') durch .find('div') ersetzen.

EDIT: aktualisiert, um nur die Länge zu prüfen, ob das aktuelle Element nicht tut ein firstChild oder wenn doch, daß der first ist kein Typ-1-Knoten.

Answer 2

Ich glaube nicht, dass Sie es direkt tun können, aber Sie können

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

Answer 3

Hier ist eine leichte Verbesserung auf die Antwort von @ user113716, diese Version behandelt den Fall versuchen, wenn es keine Kinder gibt und gibt das Ziel selbst.

Answer 4

Diese verkettbare Einzeiler funktionierte für mich, aber es nimmt an, dass es nur einen Blattknoten in der Hierarchie unten gibt.

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

Answer 5

Version, die für jedes Blatt am tiefsten wird.

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