jQuery json遍历渲染到页面并且拼接html
jQuery 处理 json遍历在页面中显示，并且拼接html。
1 <title>json多维数组遍历渲染</title> 2 3 <body> 4 <div class="box"> 5 6 </div> 7 </body> 8 9 <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 10 <script> 11 var manyArr = [{ 12 "id": 1, 13 "onitem2vel": "一级目录1", 14 "twoArr": [{ 15 "id": 1, 16 "title": "二级目录1-1", 17 "threeArr": [{ 18 "content": "三级目录1-1-1", 19 "url": "http://www.baidu.com" 20 }, { 21 "content": "三级目录1-1-2", 22 "url": "http://www.baidu.com" 23 }, { 24 "content": "三级目录1-1-3", 25 "url": "http://www.baidu.com" 26 }] 27 }, { 28 "id": 2, 29 "title": "二级目录1-2", 30 "threeArr": [{ 31 "content": "三级目录1-2-1", 32 "url": "http://www.baidu.com" 33 }, { 34 "content": "三级目录1-2-2", 35 "url": "http://www.baidu.com" 36 }, { 37 "content": "三级目录1-2-3", 38 "url": "http://www.baidu.com" 39 }] 40 }] 41 }, { 42 "id": 2, 43 "onitem2vel": "一级目录2", 44 "twoArr": [{ 45 "id": 1, 46 "title": "二级目录2-1", 47 "threeArr": [{ 48 "content": "三级目录2-1-1", 49 "url": "http://www.baidu.com" 50 }, { 51 "content": "三级目录2-1-2", 52 "url": "http://www.baidu.com" 53 }, { 54 "content": "三级目录2-1-3", 55 "url": "http://www.baidu.com" 56 }] 57 }, { 58 "id": 2, 59 "title": "二级目录2-2", 60 "threeArr": [{ 61 "content": "三级目录2-2-1", 62 "url": "http://www.baidu.com" 63 }, { 64 "content": "三级目录2-2-2", 65 "url": "http://www.baidu.com" 66 }, { 67 "content": "三级目录2-2-3", 68 "url": "http://www.baidu.com" 69 }] 70 }] 71 }]; 72 73 $(function() { 74 var htmls = ''; 75 $.each(manyArr, function(i, item1) { 76 htmls += `<div class="carea"> 77 <h2>${item1.onitem2vel}</h2> 78 <ul class="carea-list">`; 79 80 $.each(item1.twoArr, function(j, item2) { 81 htmls += `<li> 82 <a href="javascript:;"> ${item2.title} </a> 83 <ul class="carea-list-there">`; 84 85 $.each(item2.threeArr, function(k, item3) { 86 htmls += `<li> 87 <a href=" ${item3.url}"> ${item3.content} </a> 88 </li>`; 89 }) 90 htmls += `</ul></li>`; 91 }); 92 htmls += `</ul></div>`; 93 }); 94 $(htmls).appendTo($(".box")); 95 }); 96 </script>
效果如下：
