jquery遍历后台数据

图示：（由于写的是手机页面，在手机上显示页面图下）

 

html代码：

<!-- 课程大纲页面 -->
    <div class='dagang_list_w'>

        <div class='exit' >返回</div>
        <div class='concent_wrap'>
            <div class='dg_all_tittle'>课程大纲</div>
            
                <div class='concent'>

                    <div>
                        <div class='one'>一级目录</div>
                        <div class='two'>二级目录</div>
                    </div>

                </div>
            
        </div>
    </div>

css代码：

.dagang_list_w{  
  position: fixed; 
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 111111;
  background: #fff;
}
.exit{
width: 1.3rem;
  margin-top: 0.46875rem;
  margin-left: 0.46875rem;
  line-height: 0.7812rem;
  text-align: center;
  background: #ccc;
  color: #333;
  font-size: 0.3rem;
  margin-bottom: 0.46875rem;

}

.concent_wrap{
  width: 90%;
  margin: 0 auto;
  border-top: 1px solid #dedede;
}
.dg_all_tittle{
  font-size: 0.593634rem;
  text-align: center;
  font-weight: bold;
  margin-top: 0.3125rem;
  margin-bottom: 0.3125rem;
}


.concent{
    width: 100%;
    overflow: auto;
    height: 14rem;
    /* background: #ccc; */
    box-shadow: 0px 5px 20px 5px #ccc;

}
.one{
  font-size:0.5627rem;
  font-weight: bold;
}
.two{
  font-size: 0.46875rem;
  line-height: 0.7812rem;
}

js代码：

$.ajax({
  type: 'GET',
  url: url
  async: true,
  cache: false,
  dataType: "json",
  headers: { "cache-control": "no-cache" },
  data:
  {
    //data数据

  },
  success: function (jsonData) {
    

      //假设后台传的数据是这样的
      var jsonData = {
        "code": "1",
        "message": "操作成功",
        "uuid": "",
        "guideline": {
          "title": "七年级数学课程大纲",
          "chapters": [{
            "level1": "1 有理数",
            "level2": ["1.1 正数和负数、数轴、相反数、绝对值", "1.2 有理数的加减法", "1.3 有理数的乘除法", "1.4 有理数的乘方"]
          }, {
            "level1": "2 整式",
            "level2": ["2.1 单项式", "2.2 多项式", "2.3 整式的加减法-同类项及合并同类项", "2.4 整式的加减法-去括号及整式的加减法法则", "2.5 整式的乘法、除法"]
          }, {
            "level1": "3 一元一次方程",
            "level2": ["3.1 等式的性质及解一元一次方程(1)", "3.2 解一元一次方程（2)", "3.3 一元一次方程的实际应用（1)", "3.4 一元一次方程的实际应用(2)"]
          }, {
            "level1": "4 几何图形",
            "level2": ["4.1 几何图形及线段、射线、直线", "4.2 角、角的比较和运算及角度的换算"]
          }]
        }
      }
   //假设后果传的数据是这样的 END
   
      if (jsonData.code == 1) {
      var content = '';                               //html字符串保存内容
      var dg_all_tittle = jsonData.guideline.title;   //假后台数据需要的标题
      var chapters = jsonData.guideline.chapters;     //假后台数据需要的课程大纲数组

      $('.dg_all_tittle').html(dg_all_tittle);
      //遍历一级目录
      for (var i = 0; i < chapters.length; i++) {             
        content += "<div class='one'>" + chapters[i].level1 + "</div>";
        var level2 = chapters[i].level2;
        //遍历二级目录
        for (var j = 0; j < level2.length; j++) {
          content += "<div class='two'>" + level2[j] + "</div>";
        }
      }

      $('.concent').html(content);    //html()方法替换.concent里的内容

    }

  },
  error: function (XMLHttpRequest, textStatus, errorThrown) {
    error = "网络错误:" + textStatus;
    fancyNoticeBox.create($('#wraper'), '提示', error, '关闭', 1);
  }
});