javascript - 如何获取类名非空的元素数量

Question

示例代码:

console.log(document.querySelectorAll("p[class]").length);

<p class="">Hello, world!</p>
<p class="5">Hello, world!</p>
<p class="9">Hello, world!</p>
<p class="">Hello, world!</p>

我得到的:4
我的期望:2

Answer 1

您可以从集合中创建一个数组，并根据其 className 是否为数字来过滤:

const psWithClass = document.querySelectorAll("p[class]");
const countPsWithNumericClass = [...psWithClass]
  .filter(({ className }) => /^\d+$/.test(className))
  .length;
console.log(countPsWithNumericClass );

<p class="">Hello, world!</p>
<p class="5">Hello, world!</p>
<p class="9">Hello, world!</p>
<p class="">Hello, world!</p>

您还可以使用reduce来避免创建另一个中间数组，这会更有效，但读起来有点奇怪:

const psWithClass = document.querySelectorAll("p[class]");
const countPsWithNumericClass = [...psWithClass]
  .reduce(
    (a, { className }) => a + /^\d+$/.test(className),
    0
  );
console.log(countPsWithNumericClass );

<p class="">Hello, world!</p>
<p class="5">Hello, world!</p>
<p class="9">Hello, world!</p>
<p class="">Hello, world!</p>

或者，根本没有任何中间数组:

const psWithClass = document.querySelectorAll("p[class]");
const countPsWithNumericClass = Array.prototype.reduce.call(
  psWithClass,
  (a, { className }) => a + /^\d+$/.test(className),
  0
);
console.log(countPsWithNumericClass );

<p class="">Hello, world!</p>
<p class="5">Hello, world!</p>
<p class="9">Hello, world!</p>
<p class="">Hello, world!</p>

如果你只关心类名是否不是空字符串，请使用:not([class='']):

const psWithNonEmptyClass = document.querySelectorAll("p[class]:not([class=''])");
console.log(psWithNonEmptyClass.length);

<p class="">Hello, world!</p>
<p class="5">Hello, world!</p>
<p class="9">Hello, world!</p>
<p class="">Hello, world!</p>