时间戳

首页 > 解决方案 > 循环 querySelectorAll

javascript - 循环 querySelectorAll

问题描述

我正在尝试将我的 queryselectorall 点击放在一个循环中，所以我不必这样做：

document.querySelectorAll('.class a')[1].click();
document.querySelectorAll('.class a')[2].click();
document.querySelectorAll('.class a')[3].click();

我想做一段时间，直到索引是 47，我试着让它像这样

var class = document.querySelectorAll('.class a');
var i;
while (i < 47){
 class[i].click();
 i++;
}

但不工作。

标签： javascriptwhile-loopjquery-selectors

解决方案

对于初学者，您永远不会将i变量初始化为 0，因此当您开始循环时，i等于undefined. 接下来，您需要更改变量名称。class是一个保留字，就像function. 此外，如果您希望索引转到索引 47，则需要执行i < 48or i <= 47，否则循环将在索引 46 处停止。话虽如此，如果您使用查询的长度会更好，这样您就只需要尽可能多的您的 querySelectorAll() 指向的元素。否则，如果选择器指向的元素数量在您的 HTML 中发生了变化，您必须记住进入并更改循环中的硬编码数字，否则会出现问题。在声明变量后立即将长度缓存在另一个局部变量中要好得多。

尝试这个：

var classAPointer = document.querySelectorAll('.class a'),
    numClassAElements = classAPointer.length,
    i = 0;

for (; i < numClassAElements; ++i) {
  classAPointer[i].click();
}

您可能有兴趣阅读这篇关于循环遍历 querySelectorAll NodeList 的不同方法的帖子：https ://css-tricks.com/a-bunch-of-options-for-looping-over-queryselectorall-nodelists/ （性能最高的方法要么是像上面这样的常规 for 循环，要么是使用 for... of 循环，只有在你不关心支持 IE 或旧版浏览器时才应该这样做）

推荐阅读