使用递归方法遍历数据

161 阅读1分钟

问题:在一个盒子中遍历结构,

let arr = [
            {
                name: "a",
                children: [
                    {
                        name: "a-1",
                        children: [
                            {
                                name: "a-1-1",
                                children: [
                                    {
                                        name: "a-1-1-1",

                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                name: "b",
                children: [
                    {
                        name: "b-1",

                    }
                ],
                
                    
               
            },
            {
                name: "c",

            },
            {
                name: "d",
                children: [
                    {
                        name: 'd-1',

                    }
                ]
            },
        ]

1.创建函数, 2.遍历整个结构, 3.创建ul节点 4.创建li节点,并将第一项放入 5.将li放入ul中 6.将ul放入盒子中 7.调用函数

 function creatMenu(data, con) {
            let ul = $('<ul/>')   //创建ul
            data.forEach(item => {
                let li = $('<li/>').text(item.name)//创建li,并将item.name值放入li中
                
            });
            con.append(ul)//将ul放入con中
        }
        creatMenu(arr, $('.container')) //调用函数,

若其中有children,则需再次调用

   function creatMenu(data, con) {
            let ul = $('<ul/>')   //创建ul
            data.forEach(item => {
                let li = $('<li/>').text(item.name)//创建li,并将item.name值放入li中
                if (item.children)
                    creatMenu(item.children, li)
               
                ul.append(li)//将li放入ul中
            });
            con.append(ul)//将ul放入con中
        }
        creatMenu(arr, $('.container')) //调用函数,
    

结果: