使用jQuery检查DOM元素的继承可见性

Question

如果我有以下HTML代码：

<div style="display:none;">
    <span id="hello">Hey</span>
</div>

当我执行 alert($("#hello").css("display"));时，结果会显示为“inline”。显然，这个span元素并没有被显示出来，但是因为它没有直接设置display:none;属性，所以jQuery认为它是可见的。

我该如何测试某个DOM元素是否真正可见，即使它的父元素或祖先元素没有被显示出来？

- Jay Sun

Answer 1

你可以使用：

if ($('#myitem').is(':visible')){

/*Do some sort of stuff in here */

}

正在进行动画的元素（例如使用.hide或.fadeOut）将在动画完成之前一直“可见”。

- Nicolás Torres

Answer 2

您可以使用 :visible 选择器 和 is 方法。

if($("#hello").is(":visible")) {
    //It's visible!
}

is方法返回一个布尔值，指示是否有任何匹配的元素与该选择器匹配。

- James Allardice

Answer 3

使用 $(selector).is(':visible')

- Wex

Answer 4

使用.is()函数与:hidden或:visible伪选择器一起：

http://jsfiddle.net/jbabey/ucSVx/

$('#hello').is(':hidden')

- jbabey