JSFiddle - React, Tailwind, and code Playground

HTML

<p id="paragraph1" class="object nodisplay">paragraph 1</p>
<p id="paragraph2" class="object">paragraph 2</p>

<svg id="circle1" class="object nodisplay" xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="blue"/></svg>

<svg id="circle2" class="object" xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="green"/></svg>

CSS

.object
{
    border: 1px solid #000;
}

.nodisplay
{
    display: none;
}

JavaScript

// INCORRECT:  Firefox alerts paragraph1 only
$(".object:hidden").each( function()
{
    alert( ".object:hidden: " + $(this).attr("id") );
});

// INCORRECT:  Firefox alerts paragraph1 only
$(".object").each( function()
{
    if( $(this).is(":hidden") )
    {
        alert( "is(:hidden): " + $(this).attr("id") );
    }
});

// CORRECT:  Firefox alerts paragraph1 and circle1
$(".object").each( function()
{
    if( $(this).css("display") === "none" )
    {
        alert( "css: " + $(this).attr("id") );
    }
});