在空白元素上隐藏选择器 return true

Question

为什么 :hidden selector return 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'));

打印两个真

我如何才能 select 仅显示元素：none?

Answer 1

这是因为 span 由于没有内容而具有 0 height/width 维度。这意味着尽管未在其上设置 display: none 或 visibility: hidden，但该元素在技术上是不可见的。

根据the documentation：

An element is assumed to be hidden if it or any of its parents consumes no space in the document.

向元素添加一些可见内容后，它会正常工作：

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>

在空白元素上隐藏选择器 return true

is hidden selector return true on blank element

jquery

hidden