JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="test-list">
    <li id="listItem_1"> <strong>Item 1</strong> </li>
    <li id="listItem_2"> <strong>Item 2</strong> </li>
    <li id="listItem_3"> <strong>Item 3</strong> </li>
    <li id="listItem_5"> <strong>Item 5</strong> </li>
    <li id="listItem_6"> <strong>Item 6</strong>
        <ul>
            <li id="listItem_4"> <strong>Item 4</strong>
                <ul>
                    <li id="listItem_7"> <strong>Item 7</strong> </li>
                    <li id="listItem_10"> <strong>Item 10</strong> </li>
                </ul>
            </li>
        </ul>
    </li>
    <li id="listItem_8"> <strong>Item 8</strong>
        <ul>
            <li id="listItem_9"> <strong>Item 9</strong> </li>
            <li id="listItem_11"> <strong>Item 11</strong> </li>
            <li id="listItem_12"> <strong>Item 12</strong> </li>
        </ul>
    </li>
</ul>

CSS

li {
    color:black;
}

.redColor {
    color:#F00;
}

JavaScript

$(document).ready(function() {
// Trying to add css class to li who are parents of children
// When working correctly only items 6, 4, and 8 would be red
    $("#test-list li:has(ul)").addClass("redColor");
});