在Javascript中使用循环选择id的数量

Selecting Number of Id's using loop in Javascript

本文关键字：id 选择 循环 Javascript      更新时间：2023-09-26

我有5个不同的id如下:

<div id ="box1"></div>
<div id ="box2"></div>
<div id ="box3"></div>
<div id ="box4"></div>
<div id ="box5"></div>

是否有任何方法来调用每个id使用循环在javascript?

for(int i=0; i<5; i++){
//i want to call those ids each at a time. At first box1, then box2...
}

for (int i = 1; i <= 5; i++){
    var id = "box" + i;
} // box1, box2, box3, box4, box5

您将能够使用id来操作这些元素。

如果你想获取该元素并对其进行操作:

for (int i = 1; i <= 5; i++){
    var id = "box" + i;
    var element = document.getElementById(id);
}

这是微不足道的，假设每个id都遵循相同的格式:

for(int i=0; i<5; i++) {
    var element = document.getElementById('box'+(i+1));
    // Do whatever you want to with element
}

这将循环遍历每个div并获得对它的引用，以便您可以对它进行操作。只要div按顺序编号并且编号中没有中断，它就会工作(例如，如果你有box1, box2和box3，它会读取所有3个，但如果你有box1, box4, box5只会读取box1):

var ct = 1
while(document.getElementById('box' + ct)){
     var cur_div = document.getElementById('box' + ct)
     //do stuff here
     ct++
}


[].slice.call(document.getElementsByTagName("div")).forEach(printId);
function printId(element, index) {
  console.log('[id' + index + '] = ' + element.id);
}
<div id ="box1"></div>
<div id ="box2"></div>
<div id ="box3"></div>
<div id ="box4"></div>
<div id ="box5"></div>

相关文章：