具有边界条件的querySelectorAll

Question

具有边界条件的querySelectorAll

4

document.querySelectorAll 可以用于定位具有特定数据属性值的文档元素。例如：

alert(document.querySelectorAll(".dk[data-kind='3']").length);
alert(document.querySelectorAll(".dk[data-kind>'3']").length);

<div class='dk' data-kind='2'>A</div>
<div class='dk' data-kind='3'>B</div>
<div class='dk' data-kind='4'>C</div>

然而，据我所知，不可能定义使用不等式的选择器，例如data-kind>"3" - 在此处运行代码片段并尝试使用边界/不等式选择器的querySelectorAll会引发错误。

jQuery提供了机制来完成这样的事情，但是在处理移动设备时，性能损失相当大。

提取所有data-kind元素然后测试它们的kind数据是否符合边界条件将是一个微不足道的问题，但我想知道......也许有一种方法可以编写一个聪明的querySelectorAll查询，我还不知道？

- DroidOS

1

也许有一种编写聪明查询的方法。不，没有。但是，您可以考虑使用XPath（document.evaluate）。 - user663031

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tushar · Accepted Answer

您可以使用querySelectorAll来获取所有具有data-kind 属性的元素。并过滤满足特定条件的元素。

Array.from(document.querySelectorAll(".dk[data-kind]"))

这个语句会选择所有具有 dk 类和 data-kind 属性的元素。使用 Array.from 将集合转换为数组，以便可以直接在其上使用数组函数。

.filter(el => Number(el.dataset.kind) > 3)

这个过滤器将过滤掉那些 data-kind 属性值大于3的元素。

var els = Array.from(document.querySelectorAll(".dk[data-kind]")).filter(el => Number(el.dataset.kind) > 3);
console.log(els);
console.log(els.length);

<div class='dk' data-kind='2'>A</div>
<div class='dk' data-kind='3'>B</div>
<div class='dk' data-kind='4'>C</div>