2011-02-16 77 views
2

来自jquery docs一个元素在以下情况下被隐藏:一个祖先元素被隐藏,因此该元素不会显示在页面上。jquery选择可见而不使用:可见

我有一个隐藏的股利和段落可以是隐藏还是可见

<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的:可见”)中失败,因为包装是隐藏

是否有任何其他方式来检查是否包装内的可见元素并对它们进行计数。

例如检查元素是否具有类myclass和css显示:无我是一个解决方案,但我猜测任何尝试都失败。

任何帮助表示赞赏

+0

意味着你想在隐藏的div(id = wrapper)有两个可见元素给定类`myclass` – diEcho 2011-02-16 10:59:30

回答

6

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

.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标签插件设置,则工作。但在你的情况下可能就足够了。

+0

@Felix好思维,但这是一个隐藏的jquery UI选项卡,我必须解析一些事件 – ntan 2011-02-16 11:05:27

+0

@ntan:我不明白。你的意思是你不能影响样式是内联还是添加类? – 2011-02-16 11:06:41

-1

尝试:

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

结果为2的时候我试了一下:)

2

我会用Felix's way

但是,如果你真的想在不改变您的标记替代,这应该工作:

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

Live example

只要你没有在那里的产量(setTimeout等) ,可能性很高,浏览器在包装程序可见的短暂间隔期间实际上不会显示任何内容。

0

您可以直接检查显示属性,如:

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

会显示您的样式属性的值。

你也可以做

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