Question

我有很多div，其中class =“ cat-box”和class =“ cat-box隐藏”。

我创建了一个JavaScript来查看带有cat-box的所有类，但是它同时计数了“ cat-box”和“ cat-box hidden”。

我如何只计算cat-box类中的元素？

我的脚本：

classpath 'com.google.gms:google-services:4.0.1'

Answer 1

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

Answer 2

将document.querySelectorAll()与不包含hidden元素的选择器一起使用。

这是一个例子...

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

为此在JavaScript中使用querySelector和not：

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")

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

4 个答案: