jquery find class with class and style display：block

Question

我正在使用这个简单的jQuery片段检索“found”元素的数量（这些元素具有.highlight类）：

$(".highlight").length

但现在我的问题是通过style="display: none;"

隐藏了一些元素

现在，如何突出显示并显示元素数量？

类似的东西：

$(hasClass 'highlight' AND has style 'display: block'). length ?

Answer 1

您可以使用 :visible 来获取可见的元素。

$(".highlight:visible").length

Answer 2

一种方法是使用:visible jQuery伪选择器作为Adil提到的。

一个常见的陷阱是，如果具有类.highlight的元素嵌套到隐藏的容器中，那么即使该元素具有display: block

，您也无法获得它

相反，你可以使用css正则表达式如下： $('.highlight[style*="display: block"]')

一个常见的陷阱是您需要确切地知道规则是如何编写的。如果block之前没有空格，那么：display:block而不是display: block，您将无法获得该元素。

解决此问题的一种方法是仅搜索样式中的术语block，如下所示： $('.highlight[style*="block"]')

Answer 3

你也可以使用css查看该元素有css display="none"或display="block"

 $(".highlight").each(function(){
       if($(this).css("display")=="block"){
          //Your code here
       }
    });