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的长度，或者是否确认，第一个孩子不是类型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));

Answer 3

我认为你不能直接做，但你可以尝试

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

Answer 4

这个可链接的单行为我工作，但它假设下面的层次结构中只有一个叶子节点。

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

Answer 5

这将在页面上找到类型最深的元素“ param”。如果您正在寻找最深的东西，则很有用。

fonts

在jQuery中选择最深的孩子

5 个答案: