1. 程式人生 > >JQUERY .each()的用法

JQUERY .each()的用法

//後臺程式碼
	@RequestMapping("switchDate")
	@ResponseBody
	public String switchDate(IotControlDeviceData iotControlDeviceData, HttpServletResponse response) {
		List<IotControlDeviceData> iotControlDeviceDataList = iotControlDeviceDataService.findByGnAndPoolId(iotControlDeviceData);
		AjaxJson j = new AjaxJson();
		j.put("iotControlDeviceDataList", iotControlDeviceDataList);
		return renderString(response, j);
	}
//頁面
<li class="off-on-button" id="feedingMachineStatus">
							<c:forEach items="${iotControlDeviceDataList}" var="list">
								<c:if test="${list.devno == 3}">
							<!-- <li class="off-on-button" id="feedingMachineStatus"> -->
								<%-- <p class="${flag0}" onclick='butt("${deviceDo.slaveId}","${flagT}","${deviceDo.deviceId}","${fishLogPoolSet.name}")'></p> --%>
								<c:set var="flag0" value="off-on on" />
									<c:if test="${list.state == false}">
										<c:set var="flag0" value="off-on" />
									</c:if>
								<p class="${flag0}" onclick='butt("${list.id}","${list.iotStting.fishLogPoolSet.id}","${list.gatewaysn}","${list.devno}")'></p>
								<p>${list.iotStting.name}</p>
							<!-- </li> -->
							</c:if>	
							</c:forEach>
							</li>
						</ol>
						<a class="set-param" href="">設定<br />引數</a>
					</div>
					<div class="content-right-bottom">
					<div id="oxygenatorStatus">
					<c:forEach items="${iotControlDeviceDataList}" var="list">
					<c:if test="${list.devno == 1 || list.devno == 2}">
						<div class="feeding off-on-button" >
						<c:set var="flag1" value="off-on on" />
								<c:if test="${list.state == false}">
									<c:set var="flag1" value="off-on" />
								</c:if>
								${list.iotStting.name}<span  class="${flag1}" onclick='butt("${list.id}","${list.iotStting.fishLogPoolSet.id}","${list.gatewaysn}","${list.devno}")' ></span>
						</div>
						</c:if>
					</c:forEach>
//js
<script type="text/javascript">
		var indexbs ;
		function butt(id,fishLogPoolSetId,gatewaysn,devno) {
			$.ajax({
				async : false,
				url : "${ctx}/controlswitch/iotControlDeviceData/switch?id=" + id,
				type : "POST",
				dataType : "json",
				beforeSend : function() {
					// 顯示loading提示
					indexbs = top.layer.load();
				},
				success : function(data) {
					layui.use('layer', function(){
						  var layer = layui.layer;
						  top.layer.alert(data.msg,{
							  offset:'rb',
							  btn: ['確定'],
							  yes: function(index, layero){
								    layer.close(index); //如果設定了yes回撥,需進行手工關閉
								  setTimeout(function(){
								    $.ajax({
								    	dataType:"json",
								    	type:'POST',
								    	url:"${ctx}/aquacultureManagement/switchDate",
								    	data : {"iotStting.fishLogPoolSet.id":fishLogPoolSetId,"gatewaysn": gatewaysn},
								    	success: function(data2){
								    	    var tbody = ""; 
								    		if(devno == 3){
								    			$.each(data2.body.iotControlDeviceDataList,function(n,list) {
								    				var trs = ""; 
									    			var flag0 = "off-on on";
									    			if(list.devno == 3){
									    				if(list.state == false){
									    					flag0 = "off-on";
									    				}
										    			trs += '<p class="'+flag0+'" onclick="butt(&quot;'+list.id+'&quot;,&quot;'+list.iotStting.fishLogPoolSet.id+'&quot;,&quot;'+list.gatewaysn+'&quot;,&quot;'+list.devno+'&quot;)"></p>'
								    			          +'<p>'+list.iotStting.name+'</p>'; 
										    			tbody += trs; 
									    			}
								    			});
								    			$('#feedingMachineStatus').empty().append(tbody);
								    	    }else{
								    	    	$.each(data2.body.iotControlDeviceDataList,function(n,list) {
								    	    		var trs = ""; 
									    			var flag1 = "off-on on";
									    			if(list.devno == 1 || list.devno == 2){
									    				if(list.state == false){
									    					flag1 = "off-on";
									    				}
										    			trs += '<div class="feeding off-on-button" >'+list.iotStting.name
															+'<span class="'+flag1+'" onclick="butt(&quot;'+list.id+'&quot;,&quot;'+list.iotStting.fishLogPoolSet.id+'&quot;,&quot;'+list.gatewaysn+'&quot;,&quot;'+list.devno+'&quot;)"></span>'
								    			          +'</div>'; 
										    			tbody += trs; 
									    			}
								    	    	});
								    	    	$('#oxygenatorStatus').empty().append(tbody);
								    	    }
								    	   }
								    });
								}, 3000);
							  },
							  cancel: function(index, layero){ 
								  layer.close(index); //如果設定了yes回撥,需進行手工關閉
								  setTimeout(function(){
								    $.ajax({
								    	dataType:"json",
								    	type:'POST',
								    	url:"${ctx}/aquacultureManagement/switchDate",
								    	data : {"iotStting.fishLogPoolSet.id":id,"gatewaysn": gatewaysn},
								    	success: function(data2){
								    	    var tbody = ""; 
								    		if(devno == 3){
								    			$.each(data2.body.iotControlDeviceDataList,function(n,list) {
								    				var trs = ""; 
									    			var flag0 = "off-on on";
									    			if(list.devno == 3){
									    				if(list.state == false){
									    					flag0 = "off-on";
									    				}
										    			trs += '<p class="'+flag0+'" onclick="butt(&quot;'+list.id+'&quot;,&quot;'+list.iotStting.fishLogPoolSet.id+'&quot;,&quot;'+list.gatewaysn+'&quot;,&quot;'+list.devno+'&quot;)"></p>'
								    			          +'<p>'+list.iotStting.name+'</p>'; 
										    			tbody += trs; 
									    			}
								    			});
								    			$('#feedingMachineStatus').empty().append(tbody);
								    	    }else{
								    	    	$.each(data2.body.iotControlDeviceDataList,function(n,list) {
								    	    		var trs = ""; 
									    			var flag1 = "off-on on";
									    			if(list.devno == 1 || list.devno == 2){
									    				if(list.state == false){
									    					flag1 = "off-on";
									    				}
										    			trs += '<div class="feeding off-on-button" >'+list.iotStting.name
															+'<span class="'+flag1+'" onclick="butt(&quot;'+list.id+'&quot;,&quot;'+list.iotStting.fishLogPoolSet.id+'&quot;,&quot;'+list.gatewaysn+'&quot;,&quot;'+list.devno+'&quot;)"></span>'
								    			          +'</div>'; 
										    			tbody += trs; 
									    			}
								    	    	});
								    	    	$('#oxygenatorStatus').empty().append(tbody);
								    	    }
								    	   }
								    });
								}, 3000);
								}
						  	})
						});
				},
				complete : function() {
				    layer.close(indexbs);
				}
			});} 
		</script>

從後臺返回的data2是個json ,$.each(data2.body.iotControlDeviceDataList,function(n,list) {,each裡面應該是你返回的集合,

var 一個變數trs,把要迴圈的程式碼賦給trs,又在外層var了一個tbody把trs賦值給tbody,因為如果不在外部在var一個tbody內部變數外部無法呼叫,然後通過.empty()清除原有程式碼,.append(tbody)把迴圈出來的程式碼給賦給他

上面用的是layui的彈窗, 

&quot;是轉義符代表的是引號