JS树形结构根据id获取父级节点元素的示例代码

目录
  • 封装函数
  • 调用函数

封装函数

// 传入 id、树形结构数据
export function getParentTree(id, tree) {
  let arr = [] //要返回的数组
  for (let i = 0; i < tree.length; i++) {
    let item = tree[i]
    arr = []
    arr.push(item) //保存当前节点id
    if (id== item.id) {
      //判断当前id是否是默认id
      return arr //是则退出循环、返回数据
    } else {
      //否则进入下面判断，判断当前节点是否有子节点数据
      if (item.children && item.children.length > 0) {
        //合并子节点返回的数据
        arr = arr.concat(getParentTree(id, item.children ? item.children : []))
        console.log(arr)
        if (arr.map(item2 => (item2 ? item2.id : '')).includes(id)) {
          //如果当前数据中已包含默认节点，则退出循环、返回数据
          return arr
        }
      }
    }
  }

调用函数

const treeData = [{
  name: '1',
  id: 1,
  children: [{
    name: '1-1',
    id: 2,
    children: [{
      name: '1-1-1',
      id: 4,
    }],
    name: '1-2',
    id: 3,
    children: [{
      name: '1-2-1',
      id: 5,
    }],
  }]
},{
  name: '2',
  id: 6,
  children: [{
    name: '2-1',
    id: 7,
    children: [{
      name: '2-1-1',
      id: 9,
    }],
    name: '2-2',
    id: 8,
    children: [{
      name: '2-2-1',
      id: 10,
    }],
  }]
}]
console.log(getParentTree(5, treeData))

到此这篇关于JS树形结构根据id获取父级节点元素的文章就介绍到这了,更多相关js获取父级节点元素内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Js 获取HTML DOM节点元素的方法小结

    如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过)1. 通过顶层document节点获取:          (1) document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点.             如今,已经出现了如proto

  • javascript如何用递归写一个简单的树形结构示例

    现在有一个数据,需要你渲染出对应的列表出来: var data = [ {"id":1}, {"id":2}, {"id":3}, {"id":4}, ]; var str="<ul>"; data.forEach(function(v,i){ str+="<li><span>"+v.id+"</span></li>&

  • JS实现添加,替换,删除节点元素的方法

    本文实例讲述了JS实现添加,替换,删除节点元素的方法.分享给大家供大家参考,具体如下: 一直以来,对于节点操作比较纠结,特别是插入到某某节点之后.居然没有这个方法,以前的我写的方法有问题,是把新节点插入到旧节点的里面去了,还是该用insertBefore方法可以实现 下面是方法: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose

  • 如何将JavaScript将数组转为树形结构

    1.需求 后台给了一个这样的数据让咱前端去转换为树形结构(没有重复数据).不多说,先来看看给了一个怎样的数组数据,转换为怎样的树形结构. 服务器传过来的数组 const arr = [ [ {"deptId":"D019", "deptName":"销售部"}, {"deptId":"D019101", "deptName":"华北销售中心"} ]

  • JS简单获得节点元素的方法示例

    本文实例讲述了JS简单获得节点元素的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net - JS几种获得节点元素的方法</title> <script type="application/javascript">

  • jquery 查找iframe父级页面元素的实现代码

    父页面代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equ

  • javascript获取鼠标点击元素对象(示例代码)

    IE:var obj=document.elementFromPoint(event.clientX,event.clientY); 获取对象文本var a=obj.innerText FF里面要在事件里面添加对象才可以读取坐标. HTML:onclick="gj(event)" JS: 复制代码 代码如下: function gj(event){ var b=objobj=document.elementFromPoint(event.clientX,event.clientY);}

  • 使用jquery选择器如何获取父级元素、同级元素、子元素

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 复制代码 代码如下: <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> <a id="href_thr&qu

  • 【JS+CSS3】实现带预览图幻灯片效果的示例代码

    【JS+CSS3】实现带预览图幻灯片效果的示例代码

    一.前期准备 1.1 案例分析 适用场景:单例布局 1.2 方法论 V视图 HTML+CSS+调试 C js实现控制流程 D数据 优化扩展 二.代码 结构 <div class="slider"><!-- 特效区 --> <div class="main"><!-- 主视图区 --> <div class="main_i"> <div class="caption&quo

  • layer页面跳转,获取html子节点元素的值方法

    1.jsp页面,携带值跳转到新页 original.jsp var btnClick = {'click .shownewPage':function (e, value, row, index) {//点击按钮时触发时间 var Id = row.Id; layer.open({ title: '跳转到新页', type: 2, content: '/switch/switchAction!getNewPage.do?Id='+Id, //struts配置文件指定的跳转路径 area: ['9

  • vue使用exif获取图片旋转，压缩的示例代码

    <template> <div> <input type="file" id="upload" accept="image" @change="upload" /> </div> </template> <script> export default { data() { return { picValue:{}, headerImage:'' }; },

  • js自己实现一个大文件切片上传+断点续传的示例代码

    js自己实现一个大文件切片上传+断点续传的示例代码

    目录 首先我们来分析一下需求 一. 格式校验 二. 文件切片 三. 断点续传 + 秒传 + 上传进度 PM:喂,那个切图仔,我这里有个100G的视频要上传,你帮我做一个上传后台,下班前给我哦,辛苦了.我:...相信每个切图工程师,都接触过文件上传的需求,一般的小文件,我们直接使用 input file,然后构造一个 new FormData()对象,扔给后端就可以了.如果使用了 Ant design 或者 element ui 之类的ui库,那更简单,直接调用一下api即可.当然了,复杂一些的,

  • vue获取token实现token登录的示例代码

    vue获取token实现token登录的示例代码

    使用token做登录验证的思路大致如下: 1.在第一次登录的时候前端调用后端的接口,把用户名和密码传给后端. 2.后端收到请求,验证用户名和密码,验证成功后,返回给前端一个token值. 3.前端收到后端传给的token值,将token存储在本地 loaclStorage和vuex中.(本次项目用的是vue框架,使用了vuex全局状态管理) 4.前端每次路由跳转,就判断localStorage中是否有token,如果没有就跳转登录页面,如果有就跳转到相应的页面. 5.分装一公用的请求接口方法,每

  • python获取array中指定元素的示例

    对于array,如2-D的array,如何取指定元素 设array为3*10的shape s = array([[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [10, 11, 12, 13, 14, 15, 16, 17, 18, 19], [20, 21, 22, 23, 24, 25, 26, 27, 28, 29]]) 想取指定元素,下标索引即可如: >>> s[1][4] 扩展一下,若想同时取多个元素,则把行号,列号对应的元素封装成list,或者range &

  • Java获取电脑真实IP地址的示例代码

    /** * @author yins * @date 2018年8月12日下午9:53:58 */ import java.net.Inet4Address; import java.net.InetAddress; import java.net.NetworkInterface; import java.net.SocketException; import java.util.Enumeration; /** * 获取本地真正的IP地址,即获得有线或者无线WiFi地址. * 过滤虚拟机.蓝

随机推荐