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

您可以根据集合创建一个数组，并根据其.selected是否为数字来创建@IBOutlet weak var showMorebtn: OButton! @IBAction func pressShowMoreBtn(_ sender: OButton) { askForChangingheightOfCell?() showMorebtn.setTitle("Show more", for: .normal) showMorebtn.setTitle("Show less", for: .selected) }：

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=''])

Answer 2

您可以按照以下方式使用filter()：

var p = document.querySelectorAll('p')
var count = [...p].filter(el => !isNaN(el.className.trim()) && el.className).length;
console.log(count);

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

Answer 3

您可以扩展选择器以不选择具有空类属性的段落。

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

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

如何获得具有非空类名称的元素的数量

3 个答案: