javascript - 如何用属性显示: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 个带有 display:none 的类“x”？

感谢您的帮助!

Answer 1

尝试混合类名和 :hidden selector .

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

<强> Demo

这里是普通 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.

<强> Fiddle