While working with the jquery visible selector, I noticed a strange inconsistency when checking if a child element is visible or not. When using .is("visible") and .is(":visible") with the css visibility:hidden property, they produced different results. With .is('visible'), it alerted false, but with .is(":visible"), it alerted true. However, when changing the css property to display:none, the result was consistent. Here is the code snippet:
HTML
<div id="parentEle">
I have hidden span
<span class="hiddenContent">
I am hiddenContent
</span>
</div>
<button type="button" onclick="_checkChild()">Check Child</button>
JS
function _checkChild(){
var x= false;
x =$("#parentEle").children(".hiddenContent").is(":visible");
alert(x);
}
CSS
.hiddenContent{
visibility:hidden
}
If anyone can shed light on this discrepancy, I would greatly appreciate it. Thank you!