jquery选择可见而不使用: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 选项卡插件设置的，那么这将不起作用。但对于您的情况来说这可能就足够了。