div id javascript中的自动递增数字

Question

有人可以帮帮我吗？ 如何使用javascript在div ID中添加自动递增编号？ 我有四个 div，我想让它们通过 javascript 在 ID 中自动编号（box1、box2、box3、box4）。

这是我的代码

<div id="box" class="something"> </div>
<div id="box" class="something"> </div>
<div id="box" class="something"> </div>
<div id="box" class="something"> </div>

<script>
  var list = document.getElementsByClassName("something");
  for (var i = 0; i <= list.length; i++) {
   list[i].innerHTML = i;
  }
</script>

Answer 1

设置id属性

var list = document.getElementsByClassName("something");
for (var i = 0; i < list.length; i++) {
    list[i].id = "box" + (i + 1);
}

Answer 2

您的代码中有一个错误：如果您从 0 开始，<= 应该只是 <！

一种可能的解决方案是使用node.setAttribute("attributeName", "attributeValue") method 来设置/更改元素的属性（在本例中为id）：

<div id="box" class="something">A</div>
<div id="box" class="something">B</div>
<div id="box" class="something">C</div>
<div id="box" class="something">D</div>

<script>
  var list = document.getElementsByClassName("something");
  for (var i = 0; i < list.length; i++) {
   list[i].setAttribute("id", "box" + i);
  }
</script>

输出是：

<div id="box0" class="something"></div>
<div id="box1" class="something"></div>
<div id="box2" class="something"></div>
<div id="box3" class="something"></div>

如果可以使用 JS 库（例如 jQuery），那么转换可以写得更简洁：

$(".something").each(function(index) {
    $(this).attr("id", this.id + index);
});

此代码导致与上面相同的输出。

注释的jQuery代码：

// find all elements with the class "something"
$(".something")
// call for each one of them 
    .each(
// the function with parameter = current index
    function(index) {
// take the current element
    $(this)
// and set the attribute id to the new value
    .attr("id", this.id + index);
});