JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<ul id="container">
    <li class="show">First item</li>
    <li class="hide">Second item</li>
    <li class="show">Third item</li>
    <li class="show">Fourth item</li>
    <li class="show">Fifth item</li>
</ul>
<br><br>
<div id="result"></div>

CSS

.hide {display: none;}

JavaScript

function findFirstDisplayNoneChild(parent) {
    return($("#" + parent + " li:hidden").get(0));
}


var hidden = findFirstDisplayNoneChild("container");
if (hidden) {
    $("#result").html("Hidden Element: '" + hidden.innerHTML + "'");
} else {
    $("#result").html("No hidden elements found");
}