Question

I’m running into a strange problem with testing an object’s visibility with jQuery.

I have this test JS:

alert($myObject.css('display'));
alert($myObject.is(':visible'));

The first alert displays ‘block’ which makes sense as firebug clearly shows that it is set to display: block and you can see the object on the page in the browser.

The second alert, though, displays ‘false’. Which doesn’t make any sense to me at all.

Am I misunderstanding the use of is(‘:visible’)?

Answer 1

Consider this HTML:

<div id="div1" style="display: none;">
    <div id="div2">
        <p>Some div content</p>
    </div>
</div>

and this JavaScript:

$myObject = jQuery('#div2');
alert($myObject.css('display')); // 'block'
alert($myObject.is(':visible')); // false

There are multiple reasons $myObject may not be visible, even though it has display: none style set. See :visible selector docs for details.

Does it make sense now?