如何遍历ＪＳＯＮ，把其中的　key　值作为　元素的　class值？

就是生成<li class=key> p value</li> 这种形式？　　我遍历过来ｃｌａｓｓ都变成了字符串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>５个月</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>" );

$(".ongoing").append("<li class= '"+ p +"' >" +"" +p+"" +"" +obj[p]+""+"</li>" );

关键是p要变成一个变量不能成为字符串"<li class= ' p ' >"的一部分

【热门文章】

如何遍历ＪＳＯＮ，把其中的 key 值作为 元素的 class值？

如何遍历ＪＳＯＮ，把其中的　key　值作为　元素的　class值？