如何给for循环动态生成的标签移动，且每个标签移动距离加上上一次的移动距离？

Question

如题，动态创建10个span标签循环在div里<div class="square"></div><script>    var str="<span></span>";    for(var i=0;i<10;i++){        $(".square").append(str);    }</script>…… .square{        width:400px;        height: 200px;        border:1px solid red;        position: relative;    }    .square span{        width:10px;        height:10px;         background:blue;        position: absolute;        bottom:0;    }    .square span:nth-child(2){        left:12px;    }    .square span:nth-child(3){        left:24px;        background：red;    }    .square span:nth-child(4){        left:36px;    }…………好像创建的span都堆在一起了，现在想让每个标签向左移动，后面的标签且叠加前一次的移动距离，我是用的css给每个标签left移动,不过这样太繁琐了，如果要循环生成30几个标签岂不是累死。js动态应该怎么写forEach吗？求解？

Answer 1

for (var i = 0; i < 10; i++) {

    $(".square").append('<span style="left:' + i * 12 + 'px"></span>');

}

Answer 2

贡献个比较皮的写法：

var item,

    spanItems = [];

for (var i = 0; i < 10; i++) {

    item = $('<span>', {

        css: {

            "left": i * 12

        }

    });

    spanItems.push(item);

}

$('.square').append(spanItems);

Answer 3

没太看懂需求，是这个意思吗？

for(var i=0;i<10;i++){

    var str='<span style="left:'+((i+1)*12)+'px"></span>';

    $(".square").append(str);

}