.is ("visible") & .is (": visible") работает по-другому

Question

Я использую jquery visible selector, чтобы проверить, является ли дочерний элемент видимым или нет. Но удивительно .is ("visible") & .is («: visible») показывает другой результат при использовании его с видимостью CSS: скрытое свойство. Когда я использую .is («visible»), он предупреждает об ошибке & при использовании .is («: visible»), это предупреждение true , Но при изменении свойства css для отображения: none, результат согласован. Вот код.

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

Можете ли вы помочь понять это несоответствие? Спасибо

Answer 1

.is(":visible"); - jQuery special selector, который проверяет, существует ли элемент, который может время от времени меняться. .is("visible"); - стандартный селектор, который будет проверять, является ли элемент <visible /> и ничего вам не расскажет о его видимости.

Answer 2

.is("visible"); будет проверять <visible> тега, правильный синтаксис для проверки видимости такого элемента является .is(":visible"); но элемент считаются видимым даже с visibility: hidden или opacity: 0, потому что они до сих пор используют пространство в макете (см https://api.jquery.com/visible-selector/).

Единственный способ иметь .is(":visible")==false; - это если элемент не использует какое-либо пространство в макете, что и происходит, когда высота и ширина элемента равны 0 или вы используете display: none (что, в конце концов, одинаково как установка ширины и высоты элемента до 0)

Answer 3

Я объясню вам. («: visible») проверит, что элемент виден или нет, пока .is («visible») проверит, что элемент является видимым тегом или не?

Это означает, что он даст истину, если вы напишете в коде .is («span»), потому что этот текст является тегом span.