I am using jquery visible selector to check if a child element is visible or not.But surprisingly .is("visible") & .is(":visible") is showing different result on using it with css visibility:hidden property.When I am using .is('visible') it is alerting false & on using .is(":visible") is it alerting true. But on changing the css property to display:none, the result is consistent.Here is the code.

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
}

jsfiddle

Can you please help to understand this discrepancy?Thanks

I am using jquery visible selector to check if a child element is visible or not.But surprisingly .is("visible") & .is(":visible") is showing different result on using it with css visibility:hidden property.When I am using .is('visible') it is alerting false & on using .is(":visible") is it alerting true. But on changing the css property to display:none, the result is consistent.Here is the code.

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
}

jsfiddle

Can you please help to understand this discrepancy?Thanks

• javascript
• jquery
• css

Share Follow asked Nov 7, 2015 at 8:41 brkbrk 50.4k1010 gold badges5959 silver badges8484 bronze badges 2

• 4 .is("visible") will check the selected tag is visible named tag – Pranav C Balan Commented Nov 7, 2015 at 8:44
• 1 They are different selectors. I'm surprised that you think this is surprising. – GolezTrol Commented Nov 7, 2015 at 8:50

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

.is(":visible"); is a jQuery special selector that checks if an element is visible which might vary from time to time. .is("visible"); is a standard selector that would check if the element is <visible /> and won't tell you anything about it's visibility.

I will explain you .is(":visible") will check that element is visible or not while .is("visible") will check that element is visible tag or not?

It means it will give true if you write like these in your code .is("span") because these text is span tag.

.is("visible"); will check for a <visible> tag, the correct syntax for checking an element's visibility is .is(":visible"); but an element is considered visible even with visibility: hidden or opacity: 0 because they still use space in the layout (see https://api.jquery./visible-selector/ ).

The only way to have .is(":visible")==false; is if an element doesn't use any space in the layout, which is what happens when an element's height and width are 0 or you use display: none (which, in the end, is the same as setting an element's width and height to 0)