jquery - 在 jQuery 中选择最深的子级

Question

有没有一种便宜的方法来选择元素的最深子元素？

示例:

<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 节点。