V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
he2020
V2EX  ›  JavaScript

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

  •  
  •   he2020 · 70 天前 · 290 次点击
    这是一个创建于 70 天前的主题,其中的信息可能已经有所发展或是发生改变。

    要动态地渲染导航菜单,其中每个对象都对应一个菜单项,菜单项可以有子菜单,子菜单也可以有子子菜单。这样的数组结构如何转化成以下的 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)
        }
      }
      
    }
    
    jifengg
        1
    jifengg  
       69 天前   ❤️ 1
    因为你`populateMenu(objItem.children)`这里丢失了父级关系,把`node`作为父节点传进去
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3479 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 09:48 · PVG 17:48 · LAX 01:48 · JFK 04:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.