递归封包

114 阅读1分钟

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"))