如何获取具有特定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查找no。 div中的ul元素的css属性为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或：隐藏相反的内容以查找长度。