时间戳

首页 > 解决方案 > 如何获取具有非空类名的元素数量

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

问题描述

示例代码：

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

标签： javascripthtml

解决方案

您可以从集合中创建一个数组，以及filter它是否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>

推荐阅读