jQuery 在jQuery中选择最深的孩子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3787924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select deepest child in jQuery
提问by fehrlich
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>
回答by user113716
EDIT:This is likely a better approach than my original answer:
编辑：这可能是比我原来的答案更好的方法：
Example:http://jsfiddle.net/patrick_dw/xN6d5/5/
示例：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/
示例：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/
示例：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.
如果您知道最深的将是一个特定的标签（或别的东西），你可以通过更换加快它.find('*')与.find('div')例如。
EDIT:Updated to only check the length if the current element does nothave a firstChildor if it does, that the firstChild is not a type 1 node.
编辑：更新以只检查长度如果当前元素没有不具有firstChild或者如果这样做，该则firstChild不是一个类型1节点。
回答by russellfeeed
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.
这里对@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));
回答by Lo?c Février
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') );
回答by Mike S
This chainable one-liner worked for me, but it assumes there is only one leaf node in the hierarchy below.
这个可链接的单线对我有用，但它假设下面的层次结构中只有一个叶节点。
jQuery("#searchBeginsHere")
.filter(function(i,e){ return jQuery(e).children().size() === 0; })
回答by Dmitry
Version to get deepest for each leaf.
每片叶子最深的版本。
http://jsfiddle.net/ncppk0zw/14/
http://jsfiddle.net/ncppk0zw/14/
var found = $('#SearchHere *');
for (var i = 0; i < found.length; i++) {
if (i > 1) {
if (found[i].parentNode !== found[i-1]) {
// Deepest. Next element is other leaf
console.log(found[i-1]);
continue;
}
if (i == found.length-1) {
// Deepest. Last element in DOM tree
console.log(found[i]);
}
}
}
回答by talkingtoaj
This will find the deepest element of type "param" on the page. Useful if you are looking for the deepest , or whatever.
这将在页面上找到“param”类型的最深元素。如果您正在寻找最深的或其他任何东西，则很有用。
function deepest_child(param) {
var element_list = $(param)
var depth = 0
var deepest_element
element_list.each(
function (index) {
this_depth = $(this).parents().length
if (this_depth > depth) {
depth = this_depth
deepest_element= $(this)
}
})
return deepest_element
}
