Question

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

任何帮助表示赞赏

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

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

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

将显示style属性的值。

你也可以

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

Answer 4

尝试：

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

当我尝试时，结果是2：）

jquery选择可见而不使用：visible

4 个答案: