但从后端请求过来json数据之后，需要把数据做成循环列表，那么，怎么jquery拼接数据循环一个数据列表？现在写一个简单的demo，效果如下所示：
参考代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>告警列表</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <style> .rightcont { height: 80px; margin-top: 12px; background: #f1f1f1; border-radius: 8px; padding-top: 15px; } .iconalarm { float: left; width: 20%; text-align: center; } .detailalarm { float: left; width: 65%; } .namealarm { float: left; width: 15%; } </style> </head> <body> <div id="active"> <ul class="rightalarm"> <!--右侧报警监控 --> <div class="rightcont"> <div class="iconalarm"> <img src="images/fence/fence2.png" /> <p>sos</p> </div> <div class="detailalarm"> <p>2019-7-3 10:08</p> <p>王大治发出SOS报警</p> </div> <div class="namealarm"> 员工 </div> </div> </ul> </body> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { var cont = [{ "image1": "images/fence/fence1.png", "alarmtype": "sos", "date": "2019-7-3 10:08", "details": "李一男进入二道门危险区域", "alarmname": "员工" }, { "image1": "images/fence/fence2.png", "alarmtype": "危险", "date": "2019-7-3 10:07", "details": "孙二娘滞留生产车间8小时", "alarmname": "访客" }, { "image1": "images/fence/fence3.png", "alarmtype": "滞留", "date": "2019-7-3 10:00", "details": "马云脱岗窜岗报警", "alarmname": "员工" }, { "image1": "images/fence/fence2.png", "alarmtype": "脱岗", "date": "2019-7-3 9:36", "details": "王小婷走进办公室区域", "alarmname": "访客" } ] var html = ""; $.each(cont, function(k, v) { //这里的函数参数是键值对的形式，k代表键名，v代表值 html += '<div class="rightcont">'; html += '<div class="iconalarm">'; html += '<img src=' + cont[k].image1 + ' />'; html += '<p>' + cont[k].alarmtype + '</p> </div>'; html += '<div class="detailalarm">'; html += ' <p>' + cont[k].date + '</p>'; html += ' <p>' + cont[k].details + '</p></div>'; html += ' <div class="namealarm">' + cont[k].alarmname + ' </div></div>'; }); $(".rightalarm").append(html); }) </script> </html>
