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'));

打印两个真实

我如何只选择带有display：none？

的元素

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>

隐藏选择器返回空元素上的true

1 个答案: