如何给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++) {&nbsp; &nbsp; $(".square").append('<span style="left:' + i * 12 + 'px"></span>');}

Answer 2

贡献个比较皮的写法：var item,&nbsp; &nbsp; spanItems = [];for (var i = 0; i < 10; i++) {&nbsp; &nbsp; item = $('<span>', {&nbsp; &nbsp; &nbsp; &nbsp; css: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "left": i * 12&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; spanItems.push(item);}$('.square').append(spanItems);

Answer 3

没太看懂需求，是这个意思吗？for(var i=0;i<10;i++){&nbsp; &nbsp; var str='<span style="left:'+((i+1)*12)+'px"></span>';&nbsp; &nbsp; $(".square").append(str);}