javascript - 如何独立于父可见性检查元素可见性(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请求获取，并在响应到达。在我收到的每个响应中，子容器都会获得指示响应类型的特定类，例如可用、不可用 等等。因此生成的 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

如果您有可用或不可用之类的类，我不确定为什么需要这样做。但这就是我的做法(因此实际可见性不会影响 child 的可见性):

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

在行动中:

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