CODEWITHSUNDEEP
javascriptjquerycss
brk
brk

Reputation: 50291

.is("visible") & .is(":visible") working differently

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

Upvotes: 2

Views: 1505

Answers (3)

valepu
valepu

Reputation: 3315

.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.com/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)

Upvotes: 0

Harsh Sanghani
Harsh Sanghani

Reputation: 1712

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.

Upvotes: 1

Karl-Johan Sj&#246;gren
Karl-Johan Sj&#246;gren

Reputation: 17532

.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.

Upvotes: 9

Related Questions