在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 如何給for循環(huán)動態(tài)生成的標簽移動，且每個標簽移動距離加上上一次的移動距離？

如何給for循環(huán)動態(tài)生成的標簽移動，且每個標簽移動距離加上上一次的移動距離？

如題，動態(tài)創(chuàng)建10個span標簽循環(huán)在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;
    }…………

圖片描述

好像創(chuàng)建的span都堆在一起了，現在想讓每個標簽向左移動，后面的標簽且疊加前一次的移動距離，我是用的css給每個標簽left移動,不過這樣太繁瑣了，如果要循環(huán)生成30幾個標簽豈不是累死。js動態(tài)應該怎么寫forEach嗎？求解？

回答
編輯回答
安若晴

沒太看懂需求，是這個意思嗎？

for(var i=0;i<10;i++){
    var str='<span style="left:'+((i+1)*12)+'px"></span>';
    $(".square").append(str);
}

code

2017年11月18日 01:14
編輯回答
糖豆豆

貢獻個比較皮的寫法：

var item,
    spanItems = [];
for (var i = 0; i < 10; i++) {
    item = $('<span>', {
        css: {
            "left": i * 12
        }
    });
    spanItems.push(item);
}
$('.square').append(spanItems);
2017年3月31日 20:55
編輯回答
夏夕
for (var i = 0; i < 10; i++) {
    $(".square").append('<span style="left:' + i * 12 + 'px"></span>');
}
2018年6月7日 18:26