JQUERY .each()的用法
阿新 • • 發佈：2018-12-05
//後臺程式碼 @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("'+list.id+'","'+list.iotStting.fishLogPoolSet.id+'","'+list.gatewaysn+'","'+list.devno+'")"></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("'+list.id+'","'+list.iotStting.fishLogPoolSet.id+'","'+list.gatewaysn+'","'+list.devno+'")"></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("'+list.id+'","'+list.iotStting.fishLogPoolSet.id+'","'+list.gatewaysn+'","'+list.devno+'")"></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("'+list.id+'","'+list.iotStting.fishLogPoolSet.id+'","'+list.gatewaysn+'","'+list.devno+'")"></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的彈窗,
"是轉義符代表的是引號