如何使用递归把一个并不复杂的数据转化成这样的 DOM 结构?

2021-11-18 16:27:15 +08:00
 he2020

要动态地渲染导航菜单,其中每个对象都对应一个菜单项,菜单项可以有子菜单,子菜单也可以有子子菜单。这样的数组结构如何转化成以下的 DOM 结构:

var data = [
  {title: 'menu 1'},
  {
    title: 'menu 2',
    children: [
      title: 'menu 2-1'
      children: [
        //
      ]
    ]
  }
]
<div class='tree'>
  <div class='tree-node'>
    <span class='node-title'></span>
  </div>
  <div class='node-children'>
    <div class='tree-node'>
      ...
    </div>
  </div>
</div>

我的思路大概是这样的,不限层级、具有相似结构的数据可以用递归实现,但写着写着写到一半做不下去了。 有啥办法在 populateMenu 函数的大致框架下把功能实现吗?更好的做法是什么?有时候代码写到一半才发现不对劲,怎么避免这种情况呢?

<div class='menu'></div>

var container = document.querySelector('.menu')
function populateMenu(tree) {
  for(var i = 0; i <tree.length; i) {
    var objItem = tree[i] //取出每一个对象
    var node = document.createElement('div')
    node.classList.add('tree-node')
    //...

    if(objItem.children) {
      populateMenu(objItem.children)
    }
  }
  
}
838 次点击
所在节点    JavaScript
1 条回复
jifengg
2021-11-19 09:17:57 +08:00
因为你`populateMenu(objItem.children)`这里丢失了父级关系,把`node`作为父节点传进去

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/816323

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX