在jQuery中选择最深的孩子

Question

是否有一种cheep方法来选择元素中最深的子元素？

例:

<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

编辑:这可能是一个比我原来的答案更好的方法:

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

或者这甚至更短一些:

示例: 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

原始答案:

这似乎有效:

示例: 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 );

如果您知道最深的将是一个特定的标签(或别的东西),你可以通过更换加快它.find('*')与.find('div')例如.

编辑:更新以只检查长度如果当前元素没有不具有firstChild或者如果这样做,该则firstChild不是一个类型1节点.

Answer 2

@ user113716的答案略有改进,此版本处理没有子节点并返回目标本身的情况.

 (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));