jquery不使用:visible而选择visible

Question

在jquery文档中，元素在以下情况下被隐藏:祖先元素被隐藏，因此该元素不会显示在页面上。

我有一个隐藏的div和内部段落，可以是隐藏的也可以是可见的

<div id="wrapper"> <-- this is hidden -->
    <p class="myclass" style=">display:none">text</p> 
    <p class="myclass">text</p> 
    <p class="myclass" style=">display:none">text</p> 
    <p class="myclass">text</p> 
</div>

因此任何选择$(".myclass:visible")都会失败，因为包装器是隐藏的

有没有其他方法可以检查包装器中是否有可见元素并对其进行计数。

例如，检查元素是否有类myclass和css display:none可能是一种解决方案，但我的任何尝试都会失败。

感谢您的任何帮助

Answer 1

我看到的唯一方法是添加一个自定义类来隐藏元素(而不是内联样式)：

.hidden {
    display: none;
}

<div id="wrapper"> <-- this is hidden -->
    <p class="myclass hidden"text</p> 
    <p class="myclass" >text</p> 
    <p class="myclass hidden">text</p> 
    <p class="myclass" >text</p> 
</div>

然后，您可以使用$('.myclass:not(.hidden)').length计算“可见”的数量。

更新：

如果您实际上只需要找到display属性不是none的元素，那么.filter()就可以完成这项工作：

var count = $('.myclass').filter(function() {
    return this.style.display !== "none";    
}).length;

当然，如果某些元素的display:none是由您设置的，而不是由UI选项卡插件设置的，那么这将不起作用。但在你的情况下，这可能就足够了。

Answer 2

我会使用Felix's way。

但是如果你真的想要一个不改变你的标记的替代方案，这应该是可行的：

var wrapper, visibles;
wrapper = $("#wrapper");
wrapper.show();
visibles = wrapper.find(":visible");
wrapper.hide();

Live example

只要你不在其中(setTimeout等)，在包装器可见的短时间内，浏览器实际上不会显示任何东西的可能性很高。

Answer 3

您可以直接检查display属性，例如：

$('#wrapper p.myclass').each(function(){
 alert($(this).attr('style'));
}

将向您显示style属性的值。

你也可以这样做

this.style.display可直接访问display属性。