如何檢查元素在我的情況下是否可見？

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/