jq动态插入数据和设置最后一个标签样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>物流详情</title>
<script type="text/javascript" src="${base}/res/js/jquery.js"></script>
<script type="text/javascript" src="${base}/res/js/jquery.validation.min.js"></script>
<script type="text/javascript" src="${base}/res/js/admincp.js"></script>
<script type="text/javascript" src="${base}/res/js/jquery.cookie.js"></script>
<script type="text/javascript" src="${base}/res/js/common.js" charset="utf-8"></script>
<script type="text/javascript" src="${base}/res/js/ajaxfileupload/ajaxfileupload.js"></script>
<script type="text/javascript" src="${base}/res/js/layer/layer.js"></script>
<script type="text/javascript" src="${base}/res/js/util.js" charset="utf-8"></script>
<#--css-->
<link rel="stylesheet" href="${base}/res/js/layui/css/layui.css" media="all">
<link href="${base}/res/css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile2" />
<link href="${base}/res/css/logisInfo.css" rel="stylesheet">
</head>
<body>
<div class="page">
<input type="text" name="trackingNumber" value="SF1318100715597" style="display: none">
<div class="package-title">顺丰物流信息:</div>
<div class="package-status">
<div class="status-box">
<ul class="status-list">
</ul>
</div>
</div>
</div>
<script>
$(function(){
getInfo()
function getInfo(){
var trackingNumber = $("input[name=trackingNumber]").val()
$.ajax({
url: "${base}/logisticsInfo/getSfInfo",
type: "get",
dataType: "json",
data: {
trackingNumber:trackingNumber,
},
contentType: "application/json",
async:false,
success: function(res) {
// console.log(res)
if(res.code == 0){
if(res.data != "" && res.data != null){
var logisList = JSON.parse(res.data)
var logisStr = ""
$.each(logisList,function(index,item){
let desc = index
let time = item
logisStr += `<li>
<div class="status-content-before">`+desc+`</div>
<div class="status-time-before">`+time+`</div>
<div class="status-line"></div>
</li>`
});
// console.log(logisStr)
$(".status-list").html(logisStr) //或 $(".status-list").append(logisStr)
//先添加类
$(".status-list li:last div:eq(0)").addClass('status-content-latest');
$(".status-list li:last div:eq(1)").addClass('status-time-latest');
//再移除类
$(".status-list li:last div:eq(0)").removeClass('status-content-before');
$(".status-list li:last div:eq(1)").removeClass('status-time-before');
}
}
}
});
}
})
</script>
</body>
</html>
第二种方式逐条插入
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>物流详情</title>
<script type="text/javascript" src="${base}/res/js/jquery.js"></script>
<script type="text/javascript" src="${base}/res/js/jquery.validation.min.js"></script>
<script type="text/javascript" src="${base}/res/js/admincp.js"></script>
<script type="text/javascript" src="${base}/res/js/jquery.cookie.js"></script>
<script type="text/javascript" src="${base}/res/js/common.js" charset="utf-8"></script>
<script type="text/javascript" src="${base}/res/js/ajaxfileupload/ajaxfileupload.js"></script>
<script type="text/javascript" src="${base}/res/js/layer/layer.js"></script>
<script type="text/javascript" src="${base}/res/js/util.js" charset="utf-8"></script>
<#--css-->
<link rel="stylesheet" href="${base}/res/js/layui/css/layui.css" media="all">
<link href="${base}/res/css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile2" />
<link href="${base}/res/css/logisInfo.css" rel="stylesheet">
</head>
<body>
<div class="page">
<input type="text" name="trackingNumber" value="SF1318100715597" style="display: none">
<div class="package-title">顺丰物流信息:</div>
<div class="package-status">
<div class="status-box">
<ul class="status-list">
</ul>
</div>
</div>
</div>
<script>
$(function(){
getInfo()
function getInfo(){
var trackingNumber = $("input[name=trackingNumber]").val()
$.ajax({
url: "${base}/logisticsInfo/getSfInfo",
type: "get",
dataType: "json",
data: {
trackingNumber:trackingNumber,
},
contentType: "application/json",
async:false,
success: function(res) {
// console.log(res)
if(res.code == 0){
if(res.data != "" && res.data != null){
var logisList = JSON.parse(res.data)
$.each(logisList,function(index,item){
let desc = index
let time = item
let logisStr = `<li>
<div class="status-content-before">`+desc+`</div>
<div class="status-time-before">`+time+`</div>
<div class="status-line"></div>
</li>`
$(".status-list").append(logisStr)
});
//最后一个li的样式
$(".status-list li:last div:lt(2)").css("color","#0278D8");
}
}
}
});
}
})
</script>
</body>
</html>
