如何獲得具有特定CSS屬性的元素的長度？

Question

如果我有一個HTML代碼段

<div>
     <ul style="display:block">
         <li>A</li>
         <li>B</li>
     </ul>
     <ul style="display:none">
         <li></li>
         <li></li>
     </ul>
</div>

如何使用jQuery查找編號。 div中具有display: none css屬性的ul元素的數量display: none ？ 我知道我可以使用$('div').children('ul').length但這會返回所有ul元素

Answer 1

如果要獲取隱藏ul的長度，可以使用：hidden選擇器。 它將使用display:none設置。 同樣，您也具有:visible選擇器。

$('div').children('ul:hidden').length

可以將元素視為隱藏的原因有幾個：

• 它們的CSS顯示值為none。
• 它們是type =“ hidden”的表單元素。
• 它們的寬度和高度明確設置為0。
• 祖先元素被隱藏，因此該元素未顯示在頁面上。

Answer 2

您可以使用簡單的過濾器過濾特定的CSS值：

$('div ul').filter(function() {
    return this.style.display === 'none';
}).length

Answer 3

您應該可以使用：visible標記來找到所有可見列表，然后對相反的位置執行$('ul:visible').length或：hidden來查找長度。