如何獨立於父可見性（jQuery與否）檢查元素可見性

Question

我的第一個問題請耐心等待。 我有一個容器，包含不同數量的子元素，如下所示：

<div class="parent">
    <div class="element">content</div>
    <div class="element">content</div>
    <div class="element">content</div>
</div>

快速問題：是否有jQuery或簡單的JS方法來檢查element容器是否可見而與parent可見的無關？

只是要求

jQuery('.parent .element:visible').length

不工作。

背景： parent容器可以切換，子element的內容由ajax請求獲取，並在響應到達時填充。 在我得到的每個響應中，子容器獲得指示響應類型的特定類，例如available ， unavailable等等。 因此生成的DOM可能如下所示：

<div class="parent">
    <div class="element available">content</div>
    <div class="element unavailable">content</div>
    <div class="element unavailable">content</div>
</div>

這是一個模塊，使用不同的CSS文件多次。 因此，我無法控制CSS實現是否實際隱藏了unavailable元素，因為這只在CSS中完成。 容器可以打開，但不必。 但我必須知道容器內部是否有可見元素而不打開它。 這可能嗎？

提前致謝！

Answer 1

如果您有可用或不可用的課程，我不確定您為什么需要這樣做。 但這就是我要這樣做的方式（因此實際可見性不會影響孩子的知名度）：

if (
    $('.element').css('display') != 'none' && 
    $('.element').css('visibility') != 'hidden'
) {
    // ...
}

在行動：

http://jsfiddle.net/EbaMY/2/

Answer 2

這不是最好的答案，但我認為它應該有效

  if ($('.parent').is(':visible')) {
        $('.element:visible')....//what you want to do
    }else{
       $('.parent').show()
       $('.element:visible')...//what you want to do again
       $('.parent').hide()
    }