jquery拼接数据循环一个数据列表

系统管理员 2022-12-05 10:21 165阅读 0赞

但从后端请求过来json数据之后，需要把数据做成循环列表，那么，怎么jquery拼接数据循环一个数据列表？现在写一个简单的demo，效果如下所示：  
![641e9bb724ecc6e6ebd9555b725f5c4c.png][]  
参考代码如下：

<!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>
    </div>
    	</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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[641e9bb724ecc6e6ebd9555b725f5c4c.png]: /images/20221123/87bcad2f4c2642839767d8cd7e8cc149.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/40ebd216df3d4efc8fe05aeda2730286.png