如何检查元素在我的情况下是否可见？

Question

我有一个奇怪的问题在我的情况。

我有隐藏的东西，但jQuery找不到它。

HTML

<div id='test'> 
    <h3>title here</h3> 
</div> 

CSS

#test h3 { 
    visibility: hidden; 
} 

JS

if (('#test h3').is(':visible')) { 
    alert('visible'); 
} 

我不应该因为我H3标签被隐藏，但警告框保持雨后春笋般冒出来得到警告框。任何人都可以帮助我这个奇怪的问题？非常感谢！

Answer 1

由于隐藏可见性仍占用空间，jQuery认为它们可见。

下面是引自the docs：

元素被认为是可见的，如果他们消耗在文档中的空间。可见元素的宽度或高度大于零。

带有visibility:hidden或opacity: 0的元素被视为可见，因为它们仍占用布局空间。

---

如果要检查元素的visibillity没有设置为hidden，使用此：

if ($('#test h3').css('visibility') == 'visible') { 
    alert('visible'); 
} 

---

要检查的祖先太，使用此：

var visible = true; 

$('#test h3').parents().addBack().each(function() { 
    if ($.css(this, 'visibility') != 'visible') return visible = false; 
}); 

if (visible) { 
    // do whatever... 
} 

---

你可以抽象所有到一个可重用filter expression：

jQuery.expr[':']['visible-real'] = function(el) { 

    var visible = true; 

    $(el).parents().addBack().each(function() { 
     if ($.css(this, 'visibility') != 'visible') return visible = false; 
    }); 

    return visible; 
}; 

然后你可以用它当你需要它，如下所示：

if ($('#test h3').is(':visible-real')) { 
    alert('visible'); 
} 

这里的小提琴：http://jsfiddle.net/3LGm7/