是隱藏選擇器返回true爲空元素

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>