jQuery plugin: .deepest()

Get the deepest descendants matching an optional selector of each element in the set of matched elements.

by Gerald Fullam

HTML

<div id="searchHere">
    <div class="set">
        <div>
            <div></div>
        </div>
    </div>
    <div class="set empty"></div>
    <div class="set">
        <div>
            <div>
                <p class="strong">One</p>
            </div>
        </div>
    </div>
    <div class="set">
        <div>
            <div>
                <p class="strong">Two</p>
            </div>
        </div>
    </div>
    <div class="set">
        <div>
            <p>Buckle my <span class="strong">shoe</span></p>
        </div>
    </div>
    <div class="set">
        <div>
            <div>
                <div>
                    <div id="deepest"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

div, p {
    margin: 2px;
    padding: 2px;
    min-height: 1em;
    text-align: center;
}
div {
    border: 1px solid CadetBlue;
} 
p {
    border: 1px dotted DimGray;
}

JavaScript

(function ($) {
    $.fn.deepest = function (selector) {
        var deepestLevel  = 0,
            $deepestChild,
            $deepestChildSet;
     
        this.each(function () {
            $parent = $(this);
            $parent
                .find((selector || '*'))
                .each(function () {
                    if (!this.firstChild || this.firstChild.nodeType !== 1) {
                        var levelsToParent = $(this).parentsUntil($parent).length;
                        if (levelsToParent > deepestLevel) {
                            deepestLevel = levelsToParent;
                            $deepestChild = $(this);
                        } else if (levelsToParent === deepestLevel) {
                            $deepestChild = !$deepestChild ? $(this) : $deepestChild.add(this);
                        }
                    }
                });
            $deepestChildSet = !$deepestChildSet ? $deepestChild : $deepestChildSet.add($deepestChild)
        });
            
        return this.pushStack($deepestChildSet || [], 'deepest', selector || '');
    };
}(jQuery));

$('#searchHere')
    .deepest()
        .css('background-color', 'PowderBlue')
    .end()
    .deepest('p')
        .css('background-color', 'PeachPuff')
    .end()
    .deepest('.strong')
        .css('font-weight', 'bold');
$('.set')
    .deepest()
        .css('border-width', '5px')
    .end()
    .css('border-color', 'HotPink');