ID循环用于循环

时间:2015-03-17 23:33:26

标签: javascript for-loop duplicates

使用Javascript。我正在尝试复制div并在fo中动态命名。以下两种情况似乎都不起作用:

var origDiv = document.getElementById("outerSquare");
for (i=1; i<=4; ++i){
    newDiv = document.body.appendChild(origDiv.cloneNode(true));
//  newDiv.id = "block"+i;
    newDiv.setAttribute("id", "block"+i);
}

这是小提琴: http://jsfiddle.net/dmperkins74/5r01zyma/

有趣的是,它似乎只是复制了我的“outerSquare”中的div。如果我删除重置ID的尝试,则全部失败。任何见解将不胜感激。

谢谢, 丹P。

1 个答案:

答案 0 :(得分:1)

使用课程:

<div class="outerSquare">
<div class="innerSquare"></div>
</div>

var origDiv = document.getElementsByClassName("outerSquare")[0];

for (i=1; i<=4; ++i){
    newDiv = document.body.appendChild(origDiv.cloneNode(true));
    newDiv.style.left = i*40 +"px";
    newDiv.style.top = i*40 +"px";
//  newDiv.id = "block"+i;
   //newDiv.setAttribute("id", "block"+i);
}

origDiv.style.left = "200px";

block2.style.left = "400px";

http://jsfiddle.net/5r01zyma/3/没有ID重复,没有样式问题。

通过更改ID,您无法应用旧的CSS样式。那是个问题。附:现在,如果需要,可以添加id。