javascript - 如何用属性 display:none 测量一个类的长度

Question

有没有办法测量在 javaScript jQuery 中具有 display:none 的特定类的元素？

例如：

<div class="x" style="display: none;"></div>
<div class="x" style="display: none;"></div>
<div class="x"></div>

如果我在下面执行此代码，我将收到警报“3”，因为有 3 个元素具有 class="x"。

var n = document.getElementsByClassName('x').length;
alert(n);

什么是正确的选择器，以便我的警报显示只有 2 个类“x”和 display:none？

谢谢你的帮助！

Answer 1

尝试混合类名和:hidden 选择器。

  var list =  $('.x:hidden'); //select all elements with class x and are hidden.

演示

在香草JS中：

var n = document.getElementsByClassName('x'); //get the elements with class
var nodeList = []; 
for(var i=0, len = n.length; i<len; i++){ //loop through them
    if(n[i].style.display === "none") nodeList.push(n[i]); //check for display property value and push the element to the list.
}
alert(nodeList.length); //You have the list of elements with desired properties.

小提琴