如何获取类为item-box item-box-active的元素数量？已尝试含/不含父容器

DevOps 小满

2026-5-19

解决统计item-box item-box-active元素数量的问题

我看你现在的代码里有个关键的选择器错误，导致没法正确统计目标元素数量——你写的#area-bounding-box .item-box item-box-active会让浏览器去查找.item-box元素下的**标签名为item-box-active**的元素，这完全不是你要的「同时拥有item-box和item-box-active类」的元素！

核心修正点：多类名元素的选择器写法

要选择同时拥有多个类名的元素，需要把类名用.连起来（没有空格），比如.item-box.item-box-active，空格是用来表示「后代元素」的，别搞混。

另外注意：你的HTML里父容器是class="area-bounding-box"，但代码里用了#area-bounding-box（ID选择器），如果父容器没有设置ID的话，要改成类选择器.area-bounding-box才能匹配到。

修正后的完整函数

下面分两种情况给出代码，你可以根据需求选择：

情况1：在`area-bounding-box`父容器内统计

// 先声明数组，避免全局变量污染（如果之前没声明过的话）
let arr = [];

function next() {
  // 正确的选择器：父容器类选择器 + 多类名目标元素
  const elementArray = document.querySelectorAll('.area-bounding-box .item-box.item-box-active');
  const count = elementArray.length;

  // 更新按钮文本
  document.getElementById("btCount").innerHTML = count === 0 ? "5" : "2";
  // 将数量存入数组并打印
  arr.push(count);
  console.log(arr);
}

情况2：不限制父容器，全局统计

let arr = [];

function next() {
  // 直接选择全局的多类名元素
  const elementArray = document.querySelectorAll('.item-box.item-box-active');
  const count = elementArray.length;

  document.getElementById("btCount").innerHTML = count === 0 ? "5" : "2";
  arr.push(count);
  console.log(arr);
}