jquery - jQuery - 查找容器元素的最内部元素

Question

如何访问给定元素的最内部元素？例如。

    <div class="container">
        <div>
            <p>
                <div>
                    <i>
                    </i>
                </div>
            </p>
        </div>
    </div>

是否有某种选择器允许您直接从容器开始获取元素<div>？请考虑<i>可能不知道，它可能是别的东西

Answer 1

var element = $('.container');

while(element.children().length != 0) {
    element =element.children();
}

Answer 2

检查这个 jQuery 代码：

var maxDepth = 0;
$('*').each(function(){
    $(this).attr('depth', $(this).parents().length);
    if ($(this).parents().length > maxDepth)
        maxDepth = $(this).parents().length;
});

$('[depth="' + maxDepth + '"]').css('background','black');

jsFiddle

它可能远非最佳，但它可以完成工作。

版本 2，不修改 DOM：

var maxDepth = 0;
var deepestElements = [];
$('*').each(function(){
    $(this).attr('depth', $(this).parents().length);
    if ($(this).parents().length == maxDepth){
        deepestElements.push($(this));
    } else if ($(this).parents().length > maxDepth){
        deepestElements = [];
        deepestElements.push($(this));
        maxDepth = $(this).parents().length;
    }

});
$(deepestElements).each(function(){
    $(this).css('background','black');
});

jsFiddle2

Answer 3

尝试

var maxDepth = 0, el;

var $ct = $('.container');
var els = $ct.find(':not(:has(*))');
els.each(function(){
    var depth = $(this).parentsUntil($ct).length;
    if(depth > maxDepth){
        maxDepth = depth;
        el = this;
    }
})

$(el).html('as')

演示：小提琴

Answer 4

最好的方法：

function innerMost( root ) {
    var $children = $( root ).children();

    while ( true ) {
        var $temp = $children.children();
        if($temp.length > 0) $children = $temp;
        else return $children;
    }
}

var $inner = innerMost($('.container'));

我的原始解决方案适用于您的标记，但不是任何：

$('.container').find(':not(:has(*))');