如何将数组内容归类到对应折叠按钮下并统计li标签数量？

现有条件：我有两个折叠按钮Active Source和Inactive Source，以及一个包含数据的数组。

需求说明 #

• 遍历数组，将所有标记为Active的文本放入Active Source按钮下方的区域，所有标记为Inactive的文本放入Inactive Source按钮下方的区域
• 每个折叠按钮旁需要显示对应类别的条目数量
• 若数组中无对应类别的文本，需在对应折叠区域内显示“未找到Active类文本”或“未找到Inactive类文本”

注意事项 #

• Active Source折叠框默认处于展开状态
• 数组中的文本必须放在<li>标签内，再将<li>标签追加到<ul>标签中

完整实现代码 #

HTML 结构

<div class="collapse-container">
  <!-- Active Source 折叠区域 -->
  <div class="collapse-item">
    <button class="collapse-btn active">
      Active Source <span class="count">(0)</span>
    </button>
    <div class="collapse-content show">
      <ul class="source-list active-list"></ul>
    </div>
  </div>

  <!-- Inactive Source 折叠区域 -->
  <div class="collapse-item">
    <button class="collapse-btn">
      Inactive Source <span class="count">(0)</span>
    </button>
    <div class="collapse-content">
      <ul class="source-list inactive-list"></ul>
    </div>
  </div>
</div>

CSS 样式

.collapse-container {
  width: 300px;
  margin: 20px;
}

.collapse-btn {
  width: 100%;
  padding: 10px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}

.collapse-btn.active {
  background: #e0f2fe;
}

.collapse-content {
  display: none;
  padding: 10px;
  border: 1px solid #ddd;
  border-top: none;
}

.collapse-content.show {
  display: block;
}

.source-list {
  margin: 0;
  padding-left: 20px;
}

.source-list li {
  margin: 5px 0;
}

.empty-text {
  color: #666;
  font-style: italic;
}

JavaScript 逻辑

// 示例数据数组
const data = [
  { text: "数据源A", status: "Active" },
  { text: "数据源B", status: "Inactive" },
  { text: "数据源C", status: "Active" },
  { text: "数据源D", status: "Inactive" },
  { text: "数据源E", status: "Active" }
];

// 分类数据
const activeItems = data.filter(item => item.status === "Active");
const inactiveItems = data.filter(item => item.status === "Inactive");

// 获取DOM元素
const activeBtnCount = document.querySelector(".active-list").parentNode.previousElementSibling.querySelector(".count");
const inactiveBtnCount = document.querySelector(".inactive-list").parentNode.previousElementSibling.querySelector(".count");
const activeList = document.querySelector(".active-list");
const inactiveList = document.querySelector(".inactive-list");

// 更新按钮旁的数量
activeBtnCount.textContent = `(${activeItems.length})`;
inactiveBtnCount.textContent = `(${inactiveItems.length})`;

// 渲染Active列表
if (activeItems.length > 0) {
  activeItems.forEach(item => {
    const li = document.createElement("li");
    li.textContent = item.text;
    activeList.appendChild(li);
  });
} else {
  const emptyLi = document.createElement("li");
  emptyLi.className = "empty-text";
  emptyLi.textContent = "未找到Active类文本";
  activeList.appendChild(emptyLi);
}

// 渲染Inactive列表
if (inactiveItems.length > 0) {
  inactiveItems.forEach(item => {
    const li = document.createElement("li");
    li.textContent = item.text;
    inactiveList.appendChild(li);
  });
} else {
  const emptyLi = document.createElement("li");
  emptyLi.className = "empty-text";
  emptyLi.textContent = "未找到Inactive类文本";
  inactiveList.appendChild(emptyLi);
}

// 折叠按钮交互逻辑
document.querySelectorAll(".collapse-btn").forEach(btn => {
  btn.addEventListener("click", function() {
    this.classList.toggle("active");
    const content = this.nextElementSibling;
    content.classList.toggle("show");
  });
});

内容的提问来源于stack exchange，提问作者The Tester