3

来自 jquery docs 的元素在以下情况下被隐藏：祖先元素被隐藏，因此该元素不会显示在页面上。

我有一个隐藏的 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 是我猜的一种解决方案，但我的任何尝试都失败了。

任何帮助表示赞赏

4

4 回答 4

7

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

.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 选项卡插件设置的，这将不起作用。但这在您的情况下可能就足够了。

于 2011-02-16T10:59:02.450 回答
2

我会使用菲利克斯的方式。

但是，如果您真的想要一个替代方案而不更改您的标记，这应该有效：

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

活生生的例子

只要您在那里没有产量（setTimeout等），浏览器在包装器可见的短暂时间间隔内实际上不会显示任何内容的可能性很高。

于 2011-02-16T11:04:48.727 回答
0

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

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

将显示样式属性的值。

你也可以

this.style.display直接访问显示属性。

于 2011-02-16T11:05:57.980 回答
-1

尝试：

alert ( $("#wrapper .myclass:visible").size());

当我尝试时，结果是 2 :)

于 2011-02-16T11:02:40.540 回答