html部分
<div class="container"> </div>外部链接 jq
<script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js'></script>递归数据
//name:"" 值可更改
let arr = [ { name: "a", children: [ { name: "a-1", children: [ { name: "a-1-1", children: [ { name: "a-1-1-1", children: [ { name: "a-1-1-1-1" } ] } ] } ] }, { name: "a-2", children: [ { name: "a-2-1", children: [ { name: "a-2-1-1", children: [ { name: "a-2-1-1-1" } ] } ] } ] }, { name: "a-3", children: [ { name: "a-3-1", children: [ { name: "a-3-1-1", children: [ { name: "a-3-1-1-1" } ] } ] } ] }, { name: "a-4", children: [ { name: "a-4-1", children: [ { name: "a-4-1-1", children: [ { name: "a-4-1-1-1" } ] } ] } ] } ] } ]递归方法
function createMenu(data, con) { let ul = $("<ul/>") data.forEach(item => { let li = $("<li/>").text(item.name) //递归调用,如果有子级就继续调用 //在if中,"", and 0, and NaN, false,null,undefined都为false //判断当前children里是否有值 if (item.children) //有 createMenu(item.children, li) //无 ul.append(li) }) con.append(ul) }
// 调用函数//arr指向递归数据 $("传输对象") createMenu(arr, $(".container"))