jquery拼接数据循环一个数据列表
但从后端请求过来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>原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.07.08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读