Auto increment numbers in div id javascript

问题

can somebody please help me? How to add auto increment number in div ID using javascript? I have four divs and I'd like to have them automatically numbered (box1, box2, box3, box4) in the ID by javascript.

Here's my code

<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>

回答1:

set id property

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

回答2:

There is an error in your code: <= should be only < if you are starting from 0!

One possible solution is to use the node.setAttribute("attributeName", "attributeValue") method in order to set / change the attribute (in this case the id) of an element:

<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>

The output is:

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

If it is alright to use JS libraries (for example jQuery), then the transformation could be written even more succinctly:

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

This code leads to the same output as above.

The commented jQuery code:

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

来源：https://stackoverflow.com/questions/24845085/auto-increment-numbers-in-div-id-javascript

标签

javascript

auto-increment