Select deepest child in jQuery
I don't think you can do it directly but you can try
var s = "#SearchHere";
while($(s + " >div ").size() > 0)
s += " > div";
alert( $(s).attr('id') );
Here's a slight improvement on the answer from @user113716, this version handles the case when there are no children and returns the target itself.
(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));
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.