JSFiddle - React, Tailwind, and code Playground

by stevebeauge

HTML

<div class="root">
    <div class="x">
        <p class="my">In X</p>
    </div>
    <div class="y">
        <div>
            <p class="my">In Y</p>
        </div>
    </div>
    <div class="exclude">
        <p class="my">In exclude</p>
    </div>
</div>

CSS

div {
    border: solid 1px green;
    margin:3px;
}

JavaScript

$(function () {
    var selector = ".my";
    var excludeFilter = function () {
        return $(this).parents(".exclude").length == 0
    };
    $(selector)
        .filter(excludeFilter)
        .css("color", "red"); // Test the selector on static items

    $(document).on("click", ".my", function () {
        var $this = $(this).filter(excludeFilter);

        $this.text($this.text() + " Clicked!");

    });
});