jquery - jquery 查找具有类和样式的元素 display:block

Question

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

$(".highlight").length

但现在我的问题是某些元素是隐藏的，通过style="display: none;"

现在，如何获得突出显示和显示的元素数量？

就像是：

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

score 35 · Accepted Answer

35

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

$(".highlight:visible").length

于 2013-09-30T09:13:06.197 回答

score 8 · Accepted Answer

一种方法是使用:visibleAdil 提到的 jQuery 伪选择器。

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

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

一个常见的陷阱是您需要确切地知道规则是如何编写的。如果像这样之前没有空间block：display:block而不是display: block你也无法获得元素。

克服这个问题的一种方法是仅搜索以下block样式中的术语： $('.highlight[style*="block"]')

score 4 · Accepted Answer

你也可以通过使用css 来查看元素是否有 css display="none"或display="block"

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

score 0 · Accepted Answer

这是纯JS版本：

Array.from(document.querySelectorAll('.one')).filter(s =>
   window.getComputedStyle(s).getPropertyValue('display') != 'none'
);

.one返回具有类名和属性的所有元素display: block。

4 回答 4