提问人：DrPaulVella 提问时间：10/16/2023 更新时间：10/16/2023 访问量：60
Javascript 循环对每个元素重复查询
Javascript loop to repeat query for each element
问：
我有一个网站，其中包含多个同名的类元素。 如果我运行
var z = document.getElementsByClassName('DivContainerV2');
我得到 69 个元素
0: div.DivContainerV2
1: div.DivContainerV2
2: div.DivContainerV2
3: div.DivContainerV2
...
68: div.DivContainerV2
69: div.DivContainerV2
他们每个人都有一个“视频计数”类，我想返回它的值。 我可以像这样一一更改方括号中的数字：
var a = document.getElementsByClassName('DivItemContainerV2')[0].getElementsByClassName('video-count')[0].innerText;
var a = document.getElementsByClassName('DivItemContainerV2')[1].getElementsByClassName('video-count')[0].innerText;
var a = document.getElementsByClassName('DivItemContainerV2')[2].getElementsByClassName('video-count')[0].innerText;
var a = document.getElementsByClassName('DivItemContainerV2')[3].getElementsByClassName('video-count')[0].innerText;
有没有办法创建一个循环，重复查询 div 类名的 n 次出现？
我试过这个：
var a = [];
for(let i = 0 ; i <= z; i++) {
a = document.getElementsByClassName('DivItemContainerV2')[i].getElementsByClassName('video-count')[0].innerText
}
但是我收到一个错误：无法读取未定义的属性（读取“getElementsByClassName”）
我的预期输出将是视频计数的数组：
a = ['2391', '29k', '194'...]
答：
0赞
alex
10/16/2023
#1
尝试使用数组的 push 方法
var a = [];
for(let i = 0 ; i <= z; i++) {
a.push(document.getElementsByClassName('DivItemContainerV2')[i].getElementsByClassName('video-count')[0].innerText);
}
1赞
mplungjan
10/16/2023
#2
最简单的是 map 和 querySelectorAll，它将选择计数器。我们需要包装在 spread 中以在其上使用数组方法[...<your collection/nodelist>]
var count = [...document.querySelectorAll('.DivContainerV2 .video-count')]
.map(cnt => cnt.textContent.trim());
对于更复杂的编码，您可以执行以下操作
var count = [...document.querySelectorAll('.DivItemContainerV2 .video-count')]
.map(cnt => {
const val = cnt.textContent.trim();
const match = val.match(/(\d+)(\D+)/)
if (match) {
const [_, num, suffix] = match;
const mult = { "k": 1000 }[suffix.toLowerCase()]; // add whatever needed
return mult ? num * mult : +num;
} else return +val
});
console.log(count)<div class='DivItemContainerV2'>
<div class='video-count'>2391</div>
</div>
<div class='DivItemContainerV2'>
<div class='video-count'>29k</div>
</div>
<div class='DivItemContainerV2'>
<div class='video-count'>194</div>
</div>
1赞
DecPK
10/16/2023
#3
您可以将 querySelectorAll 与 className 一起使用，然后循环并获取内部文本值的数组。.DivContainerV2 .video-count
您可以将 Array.prototype.map 用作：
const allVideoCountEl = Array.from(document.querySelectorAll(".DivContainerV2 .video-count"));
const innerValues = allVideoCountEl.map(videoCountEl => videoCountEl.innerText.trim())
console.log(innerValues)<div class="DivContainerV2">
<div class="video-count">
2391
</div>
</div>
<div class="DivContainerV2">
<div class="video-count">
29k
</div>
</div>
<div class="DivContainerV2">
<div class="video-count">
194
</div>
</div>您还可以将 Array.prototype.forEach 用作：
const allVideoCountEl = Array.from(document.querySelectorAll(".DivContainerV2 .video-count"));
const innerValues = [];
allVideoCountEl.forEach(videoCountEl => {
innerValues.push(videoCountEl.innerText.trim());
})
console.log(innerValues)<div class="DivContainerV2">
<div class="video-count">
First
</div>
</div>
<div class="DivContainerV2">
<div class="video-count">
Second
</div>
</div>
<div class="DivContainerV2">
<div class="video-count">
Third
</div>
</div>评论
0赞
DrPaulVella
10/16/2023
这很好，但是如何将其保存为变量而不是控制台日志？
0赞
DecPK
10/16/2023
@DrPaulVella 示例在沙盒中更新，在这里检查一下
0赞
DecPK
10/16/2023
@DrPaulVella 创建一个数组并推送它
-1赞
Ronjark
10/16/2023
#4
这是一个好的开始。
如果你得到.则未定义 before 元素。所以可能是 [i]，因为文档可能是定义的。我猜我遥不可及，所以你的 Z 太高了。cannot read properties of undefined (reading 'getElementsByClassName')getElementsByClassName
你的Z是什么？你想得到多少件物品？如果你写 3，你应该得到 0-3，所以有 4 个项目。
您还将 A 重新分配为元素，如果您希望添加所有元素，则可以使用 push，或者如果您将获得一个项目数组，则可以使用 spread 运算符。
所以
var a = [];
for(let i = 0 ; i <= z; i++) {
a = [...a, ...document.getElementsByClassName('DivItemContainerV2')[i].getElementsByClassName('video-count')[0].innerText]
}
评论
0赞
mplungjan
10/16/2023
没有 JS 集合或数组从 0 到长度。始终长度为 1。
评论
i < zi <= z