JavaScript树形目录递归判断层数

  // 递归判断层数
  traverse(obj, count) {
    if (count) {
      count++
    } else {
      count = 1
    }
    for (let i in obj) {
       //floor为树形层数
      obj[i].floor = count

      if (obj[i].leafNodes.length > 0) {
        this.traverse(obj[i].leafNodes, count)
      }

    }
  },
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
树形菜单是一种常见的网页导航结构,其层级关系类似树状结构,可以通过递归函数来实现。 递归函数是一种自我调用的函数,在树形菜单中,递归函数可以用来遍历菜单的层级结构,并展示相应的菜单项。 在JavaScript中,可以使用递归函数来实现树形菜单。首先,我们需要一个菜单的数据结构,通常是一个包含多个对象的数组。每个对象表示一个菜单项,包含以下属性:id(唯一标识符)、name(菜单名称)、children(子菜单项)等。 接下来,我们可以定义一个递归函数,传入一个菜单项和父元素的DOM节点作为参数。函数首先创建一个菜单项的DOM节点,并将其添加到父元素中。然后,递归调用该函数来处理子菜单项,将当前菜单项作为父元素,并将子菜单项传入作为参数,直到所有的菜单项都被处理完成。 具体实现过程如下: function createMenu(menu, parentElement) { for(let i = 0; i < menu.length; i++) { const menuItem = menu[i]; const menuItemElement = document.createElement('li'); menuItemElement.innerHTML = menuItem.name; parentElement.appendChild(menuItemElement); if(menuItem.children) { const subMenuElement = document.createElement('ul'); menuItemElement.appendChild(subMenuElement); createMenu(menuItem.children, subMenuElement); } } } // 调用递归函数 const menuData = [ { id: 1, name: '菜单1', children: [ { id: 2, name: '菜单1-1', children: [ { id: 3, name: '菜单1-1-1' }, { id: 4, name: '菜单1-1-2' } ] }, { id: 5, name: '菜单1-2' } ] }, { id: 6, name: '菜单2' } ]; const menuElement = document.getElementById('menu'); createMenu(menuData, menuElement); 通过以上代码,我们可以实现一个基本的树形菜单。递归函数的核心思想是在处理每个菜单项时,判断是否存在子菜单,若存在,则创建一个相应的DOM节点,并将其添加到当前菜单项的DOM节点中,然后继续递归调用该函数处理子菜单项,以此类推。这样可以实现对任意层级树形菜单的创建和展示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值