Question

我有一些课程

<div class="adiv"></div>
<div class="adiv"></div>
<div class="adiv cc"></div>
<div class="adiv"></div>
<div class="adiv"></div>

document.querySelectorAll('.adiv').forEach((v, i) => {
    console.log(v.classList.contains('cc'));
});

结果是2 x false，1 x true，2 x false。问题是如何写下面的内容，如何一起检查？请不要jQuery。非常感谢

if (output is all true) return true else false?

Answer 1

使用Array.prototype.every检查数组中的每个元素是否都传递谓词。

[1, 2, 3].every((num) => num > 0); // true

因为您正在使用document.querySelectorAll，所以您需要将它返回的类似数组的对象转换为实际数组。

您可以使用Array.from。

结合起来，你得到：

allCC =
  Array.from(document.querySelectorAll('.adiv'))
    .every((node) => node.classList.contains('cc'));

Answer 2

Array.from( ... ).every( ... )方法通常会有效。不过，在这种情况下还有另一种非常优雅的方式：

!document.querySelectorAll(".adiv:not(.cc)").length

这将返回true的所有元素的否定长度（0，否则为false），而adiv类出现的所有元素都没有类cc。< / p>

另一种方式：

document.querySelectorAll(".adiv").length == document.querySelectorAll(".adiv.cc").length

这会将.adiv的数量与两个类别的元素数量进行比较。

javascript forEach检查所有元素是真/假

2 个答案: