JSFiddle - React, Tailwind, and code Playground

by beej

HTML

<div class="container">
    <div>
        <div>
            <div>
                <div>
                    <div class="foo">
                        Deep foo
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <section>
        section
        <div class="foo">Outer foo
            <div class="foo">inner Foo</div>
        </div>
    </section>
</div>

CSS

.foo {
    border: 1px solid black;
    padding: 5px;
    background-color: cyan;
}

JavaScript

$(function () {
    var highest = {},
        parentCount = null;
    
    $('.container').find('.foo').each(function (index, elem) {
        var $elem = $(elem);

        var thisParentCount = $(elem).parents().length;

        if (!parentCount || parentCount > thisParentCount) {
            parentCount = thisParentCount;
            highest = $elem;
        }
    });
    
    highest.css('background-color', 'red');
});