Javascript以一类两个来获取所有元素

Question

i have many divs with class="cat-box" and class="cat-box hidden".

I create a javascript to view all classes with cat-box, but it's counting both of "cat-box" and "cat-box hidden".

How can I count only elements with class cat-box?

My script:

function GetMore() {
  var allvis = document.getElementsByClassName('cat-box').length;
  alert(allvis);
}

Answer 1

您可以使用:not CSS伪类来实现此目的： document.querySelectorAll('.cat-box:not(.hidden)');

Answer 2

Use document.querySelectorAll() with a selector that excludes the hidden elements.

Here's an example...

 function GetMore() { var allvis = document.querySelectorAll('.cat-box:not(.hidden)').length; alert(allvis); } document.getElementById("count").addEventListener("click", GetMore); 

 .hidden { color: rgb(200, 200, 200); } 

 <div class="cat-box">cat box</div> <div class="cat-box hidden">cat box</div> <div class="cat-box">cat box</div> <div class="cat-box hidden">cat box</div> <div class="cat-box">cat box</div> <button id="count">count</button> 

Answer 3

Use querySelector and not in your javascript for that:

function GetMore() {
  var allvis = document.querySelectorAll('.cat-box:not(.hidden)').length;
  alert(allvis);
}

 function GetMore() { var allvis = document.querySelectorAll('.cat-box:not(.hidden)').length; alert(allvis); } GetMore(); 

 <div class="cat-box"></div> <div class="cat-box"></div> <div class="cat-box hidden"></div> 

Answer 4

如果您使用jQuery

$("div.cat-box")