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容器，并且ajax请求会获取子element的内容，并在响应到达时填充。在我得到的每个响应中，子容器获得指示响应类型的特定类，例如， 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()
    }

如何独立于父可见性（jQuery与否）检查元素可见性

2 个答案: