js 如何动态按组生成div

Question

我的代码

<div id='external-events'>
        <div id="title">
        </div>
        <div  id="name">
        
        </div>
                                    
    </div>



        //js生成div    
            var str = ""
            var str2 = ""
            for(i=0; i < data.length; i++){
                str += "<h4  value="+data[i].text+">" + data[i].text + "</h4>"
                  for(j=0; j < data[i].value.length; j++){
                                 
                    str2 += "<div  class='fc-event' value="+data[i].value[j].value+">" + data[i].value[j].text + "</div>"
                }  
           }  
           $("#title").html(str);
           $("#name").html(str2);
           

这样生成的话是这个样子

请问大神怎么循坏能按组来分配人员生成div呢,比如这样

Answer 1

let str = "";
data.forEach(item => {
    let valueStr = "";
    item.value.forEach(every => {
        valueStr += `<div class='fc-event' value="${every.value}"> ${every.text}</div>` 
    });
    str += `<h4 value="${item.text}">${item.text}</h4>${valueStr}`;
    
}); 
$("#title").html(str);

我用了ES6的语法，你要是觉得不方便可以自己转换

Answer 2

var str = []
for(var i=0; i<data.length; i++){
    str.push("<h4  value="+data[i].text+">" + data[i].text + "</h4>")
    for(var j=0; j<data[i].value.length; j++){
        str.push("<div class='fc-event' value="+data[i].value[j].value+">" + data[i].value[j].text + "</div>")
    }  
}  
$("#title").html(str.join(''));