javascript - 如何遍历JSON,把其中的 key 值作为 元素的 class值?
本文介绍了javascript - 如何遍历JSON,把其中的 key 值作为 元素的 class值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
就是生成<li class=key> <p>p</p> <p>value</p></li> 这种形式? 我遍历过来class都变成了字符串p啊!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<style type="text/css" media="screen">
*,ul,li,div,p,span{
padding:0;
margin:0;
}
html,body{
height:100%;
}
.content{
height:100%;
width:100%;
}
.containers{
height:100%;
width:100%;
}
.wrap{
display: flex;
height:100%;
flex-direction: column;
}
.ongoing{
flex: 1;
height:16.6rem;
padding:0 1.6rem 0 1.6rem;
border:0.1rem rgba(0, 0,0 ,0.11) solid;
}
ul li{
padding:0.8rem 0 ;
}
ul li p{
display: inline-block;
font-size:1.2rem;
color:rgba(0,0,0,0.54);
padding-right: 1.2rem;
}
ul>li:nth-child(1)>p{
font-size: 1.4rem;
}
ul>li:nth-child(1){
padding:2.4rem 0 0.8rem 0;
}
.finished ul>li:nth-child(1){
padding:1.7rem 0 0.8rem 0;
}
.ongoing .loan p:nth-child(3){
color: rgba( 255 ,41 ,41,0.69);
position: absolute;
right:0;
}
.finished .loan p:nth-child(3){
color: rgba( 0,0 ,0,0.25);
position: absolute;
right:0;
}
.ongoing .repay p:nth-child(2),.fnished .repay p:nth-child(2){
color: rgba( 255 ,41 ,41,0.69);
}
.ongoing .num p:nth-child(3),.finished .num p:nth-child(3){
color: rgba( 33, 150 ,245,1);
}
.finished{
padding:0 1.6rem 0 1.6rem;
flex:1;
background: rgb(242, 242, 242);
height:22rem;
}
</style>
<body>
<div class="containers">
<div class="wrap">
<ul class="ongoing">
</ul>
<ul class="finished">
<li class="loan">
<p>借款金额</p>
<p>5000</p>
<p>进行中</p>
</li>
<li class="loandate">
<p>借款日</p>
<p>2016-08-05</p>
</li>
<li class="deadline">
<p>还款期限</p>
<p>5个月</p>
</li>
<li class="repay">
<p>已还</p>
<p>1/5个月</p>
</li>
<li class="num">
<p>借款编号</p>
<p >5000</p>
<p>《借款协议》</p>
</li>
</ul>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8" ></script>
<script type="text/javascript" charset="utf-8" >
$(function(){
var ongoingHeight=$(".ongoing").height() ,
clientHeight=$(window).height(),
finishedHeight=clientHeight -ongoingHeight;
$(".finished").css("height",finishedHeight);
var obj={
"state":1,
"loan":5000,
"loandate":2,
"deadline":5,
"repay":1/5,
"num":5000
}
if(obj.state==1){
for(var p in obj){
console.log(p+":"+obj[p]);
$(".ongoing").append("<li class= ' p ' >" +"<p>" +p+"</p>" +"<p>" +obj[p]+"</p>"+"</li>" );
}
}
})
</script>
</body>
</html>
解决方案
$(".ongoing").append("<li class= '"+ p +"' >" +"<p>" +p+"</p>" +"<p>" +obj[p]+"</p>"+"</li>" );
关键是p要变成一个变量 不能成为字符串"<li class= ' p ' >"
的一部分
这篇关于javascript - 如何遍历JSON,把其中的 key 值作为 元素的 class值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文