JS判断p.number内容为0时为父级pledge-box添加自定义类的实现方法

实现方案 #

你可以使用DOM元素自带的closest()方法完成跨层级父容器查找，该方法会从当前节点出发向上递归遍历所有祖先节点，直到命中指定的选择器为止，完美适配你的需求。

以下是修改后的完整可运行代码：

const leftover = document.querySelectorAll('.number')

leftover.forEach((remaining) => {
  // 清除内容前后空白，避免HTML换行、缩进导致判断失效
  const count = remaining.textContent.trim()
  if (count === '0') {
    // 查找当前p标签对应的pledge-box父容器
    const currentPledgeBox = remaining.closest('.pledge-box')
    // 为父容器添加自定义类，例如售罄状态类可命名为out-of-stock
    currentPledgeBox.classList.add('out-of-stock')
  }
});

补充说明 #

• 优先用textContent而非innerHTML读取纯文本内容，可避免标签嵌套、特殊字符转义带来的判断误差
• 你之前声明的pledgeBox全局变量不需要用到，closest方法已经可以精准定位到对应数值所属的父容器

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