如何检测元素节点列表所有元素是否含指定CSS类？满足条件时如何执行额外函数？

原代码的问题在于没正确使用every()方法：

• every()要求回调函数返回布尔值来判断当前元素是否符合条件，但原代码里没有返回值，导致无法完成正确的遍历判断
• 逻辑错误：原代码只在单个元素有ipsum类时打印日志，这和“所有元素都具备该类”的需求不符

正确检测所有元素是否包含指定CSS类名 #

利用Array.every()的特性，让回调函数返回每个元素的类检测结果：

1. 把NodeList转成数组（原代码这一步是对的，Array.from(nodeList)没问题）
2. 给every()传入的回调函数返回elmNode.classList.contains('ipsum')，这样every()会自动遍历所有元素，判断是否全部满足条件

满足条件时执行额外函数 #

every()会返回一个布尔值，直接根据这个值判断：如果为true，就执行你需要的额外操作（比如打印日志、调用其他函数）

修正后的完整代码 #

<p class="lorem ipsum">Lorem ipsum</p>
<p class="lorem dolor sit">dolor sit</p>
<p class="lorem amet">amet.</p>

.lorem {
  font-family: courier new, courier;
}

const nodeList = document.querySelectorAll('p');
const testArray = Array.from(nodeList);

// 检测所有元素是否都有ipsum类
const allHaveIpsumClass = testArray.every(elmNode => {
  return elmNode.classList.contains('ipsum');
});

// 满足条件时执行额外操作
if (allHaveIpsumClass) {
  console.log('All element nodes do feature the `ipsum` css-class name.');
  // 这里可以添加其他你需要执行的函数，比如：
  // doSomethingElse();
}

简化写法（可选） #

如果不需要单独保存判断结果，可以把判断和执行合并：

const nodeList = document.querySelectorAll('p');

if (Array.from(nodeList).every(elm => elm.classList.contains('ipsum'))) {
  console.log('All element nodes do feature the `ipsum` css-class name.');
  // 执行其他函数
}

内容的提问来源于stack exchange，提问作者Виталий Юрко