jQuery is(':visible') acting funny.

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?

Answer 2

The :visible selector is not equivalent with the display css property.

From the linked documentation, visible is false when:

• They have a CSS display value of none.
• They are form elements with type="hidden".
• Their width and height are explicitly set to 0.
• An ancestor element is hidden, so the element is not shown on the page.