Question

我有5个不同的ID，如下所示：

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

有没有办法在javascript中使用for循环调用每个id？

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

Answer 1

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);
}

Answer 2

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

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

Answer 3

这将遍历每个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++
}

Answer 4

[].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>

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

4 个答案: