2011-02-16 57 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直接訪問顯示屬性。