4

我的第一个问题，所以请耐心等待。我有一个容器，其中包含不同数量的子元素，如下所示：

<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可以切换，子elements的内容通过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 中完成。而且容器可以打开，但不是必须的。但是我必须知道容器内部是否会有可见元素而不打开它。这可能吗？

提前致谢！

4

2 回答 2

3

如果您有可用或不可用的课程，我不确定为什么需要这样做。但这就是我的做法（因此实际能见度不会干扰孩子的能见度）：

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

在行动：

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

于 2012-11-26T15:00:59.997 回答
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()
    }
于 2012-11-26T14:56:42.487 回答