скрыт selector return true on blank element

Question

Почему: скрытый селектор возвращает true на пустой элемент?

<span class="xxx"> 
    <span class="a"/> 
    <span class="b"/> 
</span> 

<span class="yyy" style="display: none;"> 
    <span class="a"/> 
    <span class="b"/> 
</span> 

console.log($('span.xxx').is(':hidden')); 
console.log($('span.yyy').is(':hidden')); 

печати два истинно

Как я могу выбрать только элементы с дисплеем: Нет?

Answer 1

Это потому, что span имеет 0 размеры высоты/ширины из-за отсутствия содержания. Это означает, что элемент технически невидим, несмотря на то, что на нем не установлены ни display: none, ни visibility: hidden.

По the documentation:

предполагается Элемент будет скрыт, если он или любой из его родителей не потребляет место в документе.

После того, как вы добавите видимое содержимое к элементу он работает правильно:

console.log($('span.xxx').is(':hidden'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="xxx"> 
 
    <span class="a">A</span> 
 
    <span class="b">B</span> 
 
</span> 
 

 
<span class="yyy" style="display: none;"> 
 
    <span class="a">A</span> 
 
    <span class="b">B</span> 
 
</span>