HTML结构：
<section class="sidebar"></setion>
json:
1 { 2 "liClass": "active treeview", 3 "link": "index2.html", 4 "label": "结构预览", 5 "iClass": "'fa fa-dashboard'", 6 "children": [] 7 }, 8 { 9 "liClass": "treeview", 10 "link": "#", 11 "label": "案例", 12 "iClass": "'fa fa-files-o'", 13 "spanClass": "pull-right-container", 14 "spanChildIClass": "label label-primary pull-right", 15 "children": [ 16 { 17 "ulClass": "treeview-menu", 18 "children": [ 19 { 20 "liClass": "treeview", 21 "link": "#", 22 "label": “文字", 23 "iClass": "'fa fa-circle-o'", 24 "children": [] 25 }, 26 { 27 "liClass": "treeview", 28 "link": "#", 29 "label": "文字", 30 "iClass": "'fa fa-circle-o'", 31 "children": [] 32 }, 33 { 34 "liClass": "treeview", 35 "link": "#", 36 "label": "文字", 37 "iClass": "'fa fa-circle-o'", 38 "children": [] 39 }, 40 { 41 "liClass": "treeview", 42 "link": "#", 43 "label": "文字", 44 "iClass": "'fa fa-circle-o'", 45 "children": [] 46 }, 47 { 48 "liClass": "treeview", 49 "link": "#", 50 "label": "文字", 51 "iClass": "'fa fa-circle-o'", 52 "children": [] 53 }, 54 { 55 "liClass": "treeview", 56 "link": "#", 57 "label": "文字", 58 "iClass": "'fa fa-circle-o'", 59 "children": [] 60 }, 61 { 62 "liClass": "treeview", 63 "link": "#", 64 "label": "文字", 65 "iClass": "'fa fa-circle-o'", 66 "children": [] 67 }, 68 { 69 "liClass": "treeview", 70 "link": "#", 71 "label": "文字", 72 "iClass": "'fa fa-circle-o'", 73 "children": [] 74 }, 75 { 76 "liClass": "treeview", 77 "link": "#", 78 "label": "文字", 79 "iClass": "'fa fa-circle-o'", 80 "children": [] 81 }, 82 { 83 "liClass": "treeview", 84 "link": "#", 85 "label": "货商价格影响、环比", 86 "iClass": "'fa fa-circle-o'", 87 "children": [] 88 }, 89 { 90 "liClass": "treeview", 91 "link": "#", 92 "label": "文字", 93 "iClass": "'fa fa-circle-o'", 94 "children": [] 95 }, 96 { 97 "liClass": "treeview", 98 "link": "#", 99 "label": "文字", 100 "iClass": "'fa fa-circle-o'", 101 "children": [] 102 }, 103 { 104 "liClass": "treeview", 105 "link": "#", 106 "label": "文字", 107 "iClass": "'fa fa-circle-o'", 108 "children": [] 109 }, 110 { 111 "liClass": "treeview", 112 "link": "#", 113 "label": "1.0.01", 114 "iClass": "'fa fa-circle-o'", 115 "children": [] 116 }, 117 { 118 "liClass": "treeview", 119 "link": "#", 120 "label": "1.2.11", 121 "iClass": "'fa fa-circle-o'", 122 "children": [] 123 } 124 ] 125 } 126 ] 127 }, 128 { 129 "liClass": "treeview", 130 "link": "#", 131 "label": "文字", 132 "iClass": "'fa fa-share'", 133 "spanClass": "pull-right-container", 134 "spanChildIClass": "fa fa-angle-left pull-right", 135 "children": [ 136 { 137 "ulClass": "treeview-menu", 138 "children": [ 139 { 140 "liClass": "treeview", 141 "link": "#", 142 "label": "文字", 143 "iClass": "'fa fa-circle-o'", 144 "spanClass": "pull-right-container", 145 "spanChildIClass": "fa fa-angle-left pull-right", 146 "children": [ 147 { 148 "ulClass": "treeview-menu", 149 "children": [ 150 { 151 "liClass": "treeview", 152 "link": "#", 153 "label": "文字", 154 "iClass": "'fa fa-circle-o'", 155 "spanClass": "pull-right-container", 156 "spanChildIClass": "fa fa-angle-left pull-right", 157 "children": [ 158 { 159 "ulClass": "treeview-menu", 160 "children": [ 161 { 162 "liClass": "treeview", 163 "link": "#", 164 "label": "文字", 165 "iClass": "'fa fa-circle-o'", 166 "children": [] 167 }, 168 { 169 "liClass": "treeview", 170 "link": "#", 171 "label": "文字", 172 "iClass": "'fa fa-circle-o'", 173 "children": [] 174 }, 175 { 176 "liClass": "treeview", 177 "link": "#", 178 "label": "文字", 179 "iClass": "'fa fa-circle-o'", 180 "children": [] 181 }, 182 { 183 "liClass": "treeview", 184 "link": "#", 185 "label": "文字", 186 "iClass": "'fa fa-circle-o'", 187 "children": [] 188 }, 189 { 190 "liClass": "treeview", 191 "link": "#", 192 "label": "文字", 193 "iClass": "'fa fa-circle-o'", 194 "children": [] 195 }, 196 { 197 "liClass": "treeview", 198 "link": "#", 199 "label": "文字", 200 "iClass": "'fa fa-circle-o'", 201 "children": [] 202 }, 203 { 204 "liClass": "treeview", 205 "link": "#", 206 "label": "文字", 207 "iClass": "'fa fa-circle-o'", 208 "children": [] 209 }, 210 { 211 "liClass": "treeview", 212 "link": "#", 213 "label": "文字", 214 "iClass": "'fa fa-circle-o'", 215 "children": [] 216 } 217 ] 218 } 219 ] 220 } 221 ] 222 } 223 ] 224 }, 225 { 226 "liClass": "treeview", 227 "link": "#", 228 "label": "文字", 229 "iClass": "'fa fa-circle-o'", 230 "spanClass": "pull-right-container", 231 "spanChildIClass": "fa fa-angle-left pull-right", 232 "children": [ 233 { 234 "ulClass": "treeview-menu", 235 "children": [ 236 { 237 "liClass": "treeview", 238 "link": "#", 239 "label": "文字", 240 "iClass": "'fa fa-circle-o'", 241 "spanClass": "pull-right-container", 242 "spanChildIClass": "fa fa-angle-left pull-right", 243 "children": [ 244 { 245 "ulClass": "treeview-menu", 246 "children": [ 247 { 248 "type": "li", 249 "liClass": "treeview", 250 "link": "#", 251 "label": "文字", 252 "iClass": "'fa fa-circle-o'", 253 "children": [] 254 }, 255 { 256 "liClass": "treeview", 257 "link": "#", 258 "label": "文字", 259 "iClass": "'fa fa-circle-o'", 260 "children": [] 261 }, 262 { 263 "liClass": "treeview", 264 "link": "#", 265 "label": "文字", 266 "iClass": "'fa fa-circle-o'", 267 "children": [] 268 } 269 ] 270 } 271 ] 272 } 273 ] 274 } 275 ] 276 }, 277 { 278 "liClass": "treeview", 279 "link": "#", 280 "label": "文字", 281 "iClass": "'fa fa-circle-o'", 282 "spanClass": "pull-right-container", 283 "spanChildIClass": "fa fa-angle-left pull-right", 284 "children": [ 285 { 286 "ulClass": "treeview-menu", 287 "children": [ 288 { 289 "liClass": "treeview", 290 "link": "#", 291 "label": "文字", 292 "iClass": "'fa fa-circle-o'", 293 "spanClass": "pull-right-container", 294 "spanChildIClass": "fa fa-angle-left pull-right", 295 "children": [ 296 { 297 "ulClass": "treeview-menu", 298 "children": [ 299 { 300 "liClass": "treeview", 301 "link": "#", 302 "label": "文字", 303 "iClass": "'fa fa-circle-o'", 304 "children": [] 305 }, 306 { 307 "liClass": "treeview", 308 "link": "#", 309 "label": "文字", 310 "iClass": "'fa fa-circle-o'", 311 "children": [] 312 } 313 ] 314 } 315 ] 316 }, 317 { 318 "liClass": "treeview", 319 "link": "#", 320 "label": "文字", 321 "iClass": "'fa fa-circle-o'", 322 "spanClass": "pull-right-container", 323 "spanChildIClass": "fa fa-angle-left pull-right", 324 "children": [ 325 { 326 "ulClass": "treeview-menu", 327 "children": [ 328 { 329 "liClass": "treeview", 330 "link": "#", 331 "label": "文字", 332 "iClass": "'fa fa-circle-o'", 333 "children": [] 334 }, 335 { 336 "liClass": "treeview", 337 "link": "#", 338 "label": "文字", 339 "iClass": "'fa fa-circle-o'", 340 "children": [] 341 }, 342 { 343 "liClass": "treeview", 344 "link": "#", 345 "label": "文字", 346 "iClass": "'fa fa-circle-o'", 347 "children": [] 348 }, 349 { 350 "liClass": "treeview", 351 "link": "#", 352 "label": "文字", 353 "iClass": "'fa fa-circle-o'", 354 "children": [] 355 }, 356 { 357 "liClass": "treeview", 358 "link": "#", 359 "label": "文字", 360 "iClass": "'fa fa-circle-o'", 361 "children": [] 362 }, 363 { 364 "liClass": "treeview", 365 "link": "#", 366 "label": "文字", 367 "iClass": "'fa fa-circle-o'", 368 "children": [] 369 } 370 ] 371 } 372 ] 373 } 374 ] 375 } 376 ] 377 } 378 ] 379 } 380 ] 381 }, 382 383 json数据
js代码
1 /** 2 * Created on 2017/6/27. 3 */ 4 $(function () { 5 $.getJSON({ 6 type: "get", 7 url: "dist/json/nav.json", 8 success: function (data) { 9 var showList = $("<ul class='" + data.ulClass + "'><li class='header'>主导航</li></ul>"); 10 showAll(data, showList); 11 $(".sidebar").append(showList); 12 } 13 }); 14 //data为json数据 15 //parent为要组合成html的容器 16 function showAll(data, parent) { 17 $.each(data.children, function (index, fatherLi) {//遍历数据集 18 var li1 = $("<li class='" + fatherLi.liClass + "'><a href='" + fatherLi.link + "'><i class=" + fatherLi.iClass + "></i>" + fatherLi.label + "</a></li>");//没有children的初始li结构 19 var li2 = $("<li class='" + fatherLi.liClass + "'><a href='" + fatherLi.link + "'><i class=" + fatherLi.iClass + "></i>" + fatherLi.label + "<span class='" + fatherLi.spanClass + "'><i class='" + fatherLi.spanChildIClass + "'></i></span>" + "</a></li>");//有children的初始li结构 20 //console.log($(li1).html()); 21 //console.log($(li2).html()); 22 if (fatherLi.children.length > 0) { //如果有子节点，则遍历该子节点 23 var ul = $("<ul class='" + fatherLi.children[0].ulClass + "'></ul>"); 24 $(li2).append(ul).appendTo(parent);//将li的初始化选择好，并马上添加带类名的ul子节点，并且将这个li添加到父亲节点中 25 showAll(fatherLi.children[0], $(li2).children().eq(1));//将空白的ul作为下一个递归遍历的父亲节点传入，递归调用showAll函数 26 } else { 27 $(li1).appendTo(parent);//如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中 28 } 29 }); 30 } 31 }); 32 33 js代码
js代码解释：$.each遍历json对象
1 var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"}, 2 {"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"}, 3 {"id":"5","tagName":"pineapple"}]'; 4 5 $.each(JSON.parse(json), function(idx, obj) { 6 alert(obj.tagName); 7 }); 8 9 //or 10 11 $.each($.parseJSON(json), function(idx, obj) { 12 alert(obj.tagName); 13 });
总结：
1、json数据虽是DOM结构的映射，但存DOM信息也不是照搬全存，比如每个ul或者li就没有必要再在json中存一个”type“：”ul“，需要观察DOM结构的共同点及规律，进而转换成json。
2、ajax回调函数传递参数问题：写回掉函数的时候发现没有地方传参数，这个时候涉及闭包问题，可以利用匿名函数调用你想调用的函数，并传递参数：
1 $.getJSON({ 2 type: "post", 3 url: "dist/json/nav.json", 4 success: function (data) { 5 var showList = $("<ul class='" + data.ulClass + "'><li class='header'>主导航</li></ul>"); 6 showAll(data, showList); 7 $(".sidebar").append(showList); 8 } 9 }); 10 11 like this