jquery怎么动态创建多个不同class的div？让class的数值自增

Question

我现在是想点击这个按钮，让它每点击一次创建一个div,str是我动态创建的标签，想让里面class的log-1依次增加，log-2，log-3……是不是要循环一下？

$(".waveform-main").on("click",function(e){
           
        var num=1;
           
        var str="<div class='waveform-log log-"+num+"'>"+
                     "<div class='tag1'>"+num+"</div>"+
                     "<div class='tag2'></div>"+
                     "<span class='line-add'></span>"+
                     "<span class='icon-times'></span>"+
                     "<span class='icon-arrows-h'></span>"+
                 "</div>";
            
           
            
         $("#waveform-main-div").append(str); 
    });

Answer 1

那个num可以用jQ放到你绑事件的那个DOM上，比如：

$('.waveform-main').data('num', 1);

这样好处一是不用特别去考虑变量命名，二是不用考虑作用域。另外它可以在HTML里以data-*属性的形式显式声明，所以初始化变量时可以直接写在其所寄放的HTML标签里。

所以：

$(".waveform-main").on("click",function(e){
    var num = $('#waveform-main-div').data('num');
    num = num ? num : 1; //如果使用data-自定义属性的话可以不需要这句

    var str="<div class='waveform-log log-" + num + "'>" +
                "<div class='tag1'>" + num + "</div>" +
                "<div class='tag2'></div>" +
                "<span class='line-add'></span>" +
                "<span class='icon-times'></span>" +
                "<span class='icon-arrows-h'></span>" +
            "</div>";
    $(str).appendTo("#waveform-main-div");
    
    num+=1;
    $('#waveform-main-div').data('num', num);
});

Answer 2

不用循环，但是你那个num要放外面，放里面他每次都重新var num=1；那num就一直为1

var num=1;
$(".waveform-main").on("click",function(e){
           
        
           
        var str="<div class='waveform-log log-"+num+"'>"+
                     "<div class='tag1'>"+num+"</div>"+
                     "<div class='tag2'></div>"+
                     "<span class='line-add'></span>"+
                     "<span class='icon-times'></span>"+
                     "<span class='icon-arrows-h'></span>"+
                 "</div>";
            
           
            
         $("#waveform-main-div").append(str); 
         num++;
    });