JavaScript如何判断父容器下所有子div均包含指定类yes

• 原有代码逻辑完全不符合需求：你写的函数作用是检查单个元素及其所有父级是否存在任意一个带有指定类，你传入的第一个子元素本身就带有yes类，自然永远返回true。
• HTML存在语法错误：id属性在同一页面内必须唯一，你给多个子div重复设置相同id，会导致getElementById只能匹配到第一个元素，无法获取其他子元素做判断。

第一步：修正HTML结构 #

给父容器设置唯一id方便获取，删除子元素重复的id：

<div class="the-class" id="parent-container">
  <div class="eric purple yes"></div>
  <div class="eric"></div>
  <div class="paul purple yes"></div>
</div>

第二步：编写符合需求的判断函数 #

逻辑为：先获取父容器下所有直接子div，遍历校验每个子元素是否都带有yes类，只要有一个不满足就返回false，全部满足才返回true：

function checkAllChildHasClass(parentSelector, className) {
  // 获取父容器
  const parent = document.querySelector(parentSelector);
  if (!parent) return false;
  // 获取父容器下所有直接子div
  const childDivs = parent.querySelectorAll(':scope > div');
  // 遍历判断所有子div是否都包含目标类
  return Array.from(childDivs).every(div => div.classList.contains(className));
}

// 调用测试，会正确返回false
console.log(checkAllChildHasClass('#parent-container', 'yes'));

如果子元素是PHP动态生成、或者类是动态增删的，只需要在DOM渲染完成、或者类修改的时机调用checkAllChildHasClass函数即可，无需关心子元素的具体数量。

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