JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<div class="level1" data-attr="Level 1">Level 1
    <div class="level2" data-attr="Level 2">Level 2
        <div class="level3" data-attr="Level 3">Level 3
            <div class="label">Label</div>
            <div class="starthere">HERE!</div>
        </div>
    </div>
    <div class="level2" data-attr="Level 2">Level 2
        <div class="level3" data-attr="Level 3">Level 3
            <div class="label">Label</div>
            <div class="starthere">Also HERE!</div>
        </div>
    </div>
    <div class="level2" data-attr="Level 2">Level 2
        <div class="level3" data-attr="Level 3">Level 3
            <div class="label">Label</div>
        </div>
    </div>
</div>

JavaScript

// Save the original jQuery find we are replacing
jQuery.fn.findorig = jQuery.fn.find

// Replace jQuery find with a custom :this hook
jQuery.fn.find = function (selector) {
    // If we have a :this selector
    if (selector.indexOf(':this') > 0) {
        var self = this;
        var ret = $();
        for (var i = 0; i < this.length; i++) {
            // Save any existing id on the targetted element
            var id = self[i].id;
            if (!id) {
                // If not id already, put in a temp (unique) one
                self[i].id = 'findme123';
            }
            var selector2 = selector.replace(':this', '#findme123');
            ret = ret.add(jQuery(selector2, document));
            // restore any original id
            self[i].id = id;
        }
        ret.selector = selector;
        return ret;
    }
    return this.findorig(selector);
}

// Test case
$(function () {
   $('.starthere').find('.level3:has(:this) .label').css({
        color: 'red'
    });
});