在这种情况下如何将数据附加到标题？

Question

我想制作类似于这个小提琴中所示的HTML

https://jsfiddle.net/pL7xugg1/16/

这是我试过的

https://jsfiddle.net/pL7xugg1/20/

但是你能不能为什么标题丢失？

这是我的代码

var sampledata = 
[{
        "name": "John",
        "tip": "BUY 111",
        "time": "23-DEC"
    },

    {
        "name": "John",
        "tip": "BUY 232",
        "time": "23-DEC"
    }
]

for(var i=0;i<sampledata.length;i++)
{
var name = sampledata[i].name;
var tip = sampledata[i].tip;
var time = sampledata[i].time;

var html = '';

html+='<a href="#" class="c1">\
      <div class="stoc5 mt1">\
         <div class="c1 fl wi80">\
            <span class="fl c2 f14 ti-s mt">'+time+'</span>\
            '+tip+'\
         </div>\
         <div class="fr c2 f14 ti-s1 mt"></div>\
         <div class="cl"></div>\
      </div>\
   </a>';

   $(".hed1").html(html);

}

Answer 1

1. 包含jQuery
2. 在进行DOM操作之前使用DOM Ready。 $(function(){ .... });
3. 在for循环中不要设置.html()，而是每次使用.html()
追加

4. 不要附加到.hed附加到.cl这是正确的div。

   $(function() {
       $(".cl").html(""); // Clearing the HTML
       for (var i = 0; i < sampledata.length; i++) {
           var name = sampledata[i].name;
           var tip = sampledata[i].tip;
           var time = sampledata[i].time;
   
           var html = '';
   
           html += '<a href="#" class="c1">\
     <div class="stoc5 mt1">\
        <div class="c1 fl wi80">\
           <span class="fl c2 f14 ti-s mt">' + time + '</span>\
           ' + tip + '\
        </div>\
        <div class="fr c2 f14 ti-s1 mt"></div>\
        <div class="cl"></div>\
     </div>\
      </a>';
   
       $(".cl").append(html);
   
   }
   });
   

Live Fiddle