Select deepest child in jQuery

Question

Is there a cheap method to select the deepest child of an element ?

Example:

<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: This is likely a better approach than my original answer:

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

or this which is even a little shorter:

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

---

Original answer:

This would seem to work:

Example: http://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 ); 

If you know that the deepest will be a certain tag (or something else), you could speed it up by replacing .find('*') with .find('div') for example.

EDIT: Updated to only check the length if the current element does not have a firstChild or if it does, that the firstChild is not a type 1 node.