JQuery递归数组

首先给数组套一个容器，构造一个嵌套数组，如下所示

<div class="container"></div>

let arr = [
            {
                name: 'a-1',
                children: [
                    {
                        name: 'a-1-1',
                        children: [
                            {
                                name: 'b-1-1'
                            }
                        ]
                    }
                ]
            },
            {
                name: 'b-1',
                children: [
                    {
                        name: 'b-1-1',
                        children: [
                            {
                                name: 'b-1-1'
                            }
                        ]
                    }
                ]
            },
            {
                name: 'c-1',
                children: [
                    {
                        name: 'c-1-1'
                    }
                ]
            }
        ]

然后通过函数传参，传两个参数，第一个参数为数组里的元素，第二个参数为元素的容器，代码逻辑为先定义各个层级的容器及内容，再遍历数组内的元素，假如下一层级的数组不为空，则继续往下一层级遍历，然后将所有元素通过添加节点的方式渲染到页面上，代码如下：

function createMenu(data, container) {
            let ul = $('<ul/>')
            data.forEach(item => {
                let li = $('<li/>').text(item.name) 
                if(item.children){
                    createMenu(item.children, li) 
                }
                ul.append(li)
            });
            container.append(ul)
        }
                
        createMenu(arr, $('.container')) 

效果如下：