let province = [{ id: 1, name: "北京", pid: 0 }, { id: 3, name: "江苏", pid: 0 }, { id: 4, name: "南京", pid: 3 }, { id: 5, name: "南通", pid: 3 }, { id: 6, name: "海淀", pid: 1 } ] // 处理数据 //找到省 let pro = province.filter(r =>r.pid ===0) pro.forEach(r =>{ // 从数组中查找pid为当前id的市 // 这里再次对province进行foreach进行遍历的目的在于拿到省级下的name let cities = province.filter(rr => rr.pid ===r.id) // 每个省对象 早一个cities数组 r.cities = cities }) // 开始为ul下元素创建标签及样式 pro.forEach(r => { let li = $('<li/>').html(r.name) // 第二层循环 r.cities.forEach(rr => { let city = $('<div/>').css('padding',30).html(rr.name) li.append(city) }) $('.container').append(li) })
利用jquery创建页面元素不仅减少了代码量同时也会减少浏览器的解释时间提高运行速度，如果要更新里面的元素只需在数组里面修改即可，修改方便便捷，pro.forEach(r => {})对每个元素都进行遍历，且在遍历的同时添加子级标签及样式，这样就可以利用jquery写子级及下一级的标签了
