JSFiddle - React, Tailwind, and code Playground

by techunter

HTML

<div id="root">root
    <div id="1" class="selectme">1 selectme</div>
    <div id="2">2
        <div id="21" class="selectme">21 selectme</div>
        <div id="22" class="selectme">22 selectme
            <div id="221" class="selectme butnotme">221 notme</div>
        </div>
    </div>
    <div id="3">3
        <div id="31" class="selectme">31 selectme</div>
        <div id="32">21</div>
    </div>
    <div id="4">4
        <div id="41">41</div>
    </div>
</div>

CSS

#root div {
    min-height:30px;
    padding:5px;
    border: 1px solid black;
}

JavaScript

$.fn.children_has = function (selector) {
    var $found = $();
    $.each(this, function () {
        if ($(this).find(selector).length) {
            $found.add(this);
        }
    });
    return $found;
};
$.fn.closest_children = function (selector) {
    var $found = $(),
        $all = $();
    $.each(this, function () {
        $all=$(this).find(selector);
        $all.each(function () {
            debugger;
            if (!$all.is($(this).parent(selector))) {
                $found.add(this);
            }
        });
    });
    return $found;
};

$('#root').children('.selectme').css('background-color', 'lightblue');
$('#root').closest_children('.selectme').css('background-color', 'lightgrey');