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

Question

要动态地渲染导航菜单，其中每个对象都对应一个菜单项，菜单项可以有子菜单，子菜单也可以有子子菜单。这样的数组结构如何转化成以下的 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>

我的思路大概是这样的，不限层级、具有相似结构的数据可以用递归实现，但写着写着写到一半做不下去了。 有啥办法在 initTree函数的大致框架下把功能实现吗？

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

var container = document.querySelector('.menu')
function initTree(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) {
      var childrenNode = document.createElement('div')
      childrenNode.classList.add('tree-children') 
      //...
      initTree(objItem.children)
    }
  }
  
}

Answer 1

你好，我是有问必答小助手，非常抱歉，本次您提出的有问必答问题，技术专家团超时未为您做出解答


本次提问扣除的有问必答次数，已经为您补发到账户，我们后续会持续优化，扩大我们的服务范围，为您带来更好地服务。