Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

但是，我可以告诉它不可能定义使用不等式的选择器，例如data-kind>"3" - 在这里运行代码片段并尝试使用边界/不等式选择器querySelectorAll会引发错误

jQuery提供了执行此类操作的机制，但牺牲了在处理移动设备时非常重要的性能损失。

提取所有data-kind元素，然后测试他们的kind数据的边界条件是一件小事，但我想知道...... - 也许有办法写一个聪明的查询对于我不知道的querySelectorAll？

Answer 1

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

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

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

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

此过滤器将过滤data-kind属性值大于3的元素。

＆＃13;

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

＆＃13;

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

＆＃13;

querySelectorAll具有边界条件

1 个答案: