jQuery is(':visible') acting funny.
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?
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.
From the :visible Selector documentation:
Elements can be considered hidden for several reasons:
- 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.
Check that none of these other conditions are true.