div id의 자동 증가 숫자 javascript

Question

누군가 제발 나를 도울 수 있습니까? javascript를 사용하여 div ID에 자동 증가 숫자를 추가하는 방법은 무엇입니까? 4 개의 div가 있으며 자바 스크립트로 ID에 자동으로 번호가 매겨집니다 (상자 1, 상자 2, 상자 3, 상자 4).

여기 내 코드

<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에서 시작하는 경우 <=에만 <을해야합니다!

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

경우

하나 개의 가능한 솔루션은 요소 (본 케이스 id에서) 특성을 설정/변경하기 위해 node.setAttribute("attributeName", "attributeValue") method를 사용하는 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); 
});