主体函数

export function findAllParent (node, tree, parentNodes = [], index = 0) {
if (!node || node.fid === 0) {
return
}
findParent(node, parentNodes, tree)
let parentNode = parentNodes[index]
findAllParent(parentNode, tree, parentNodes, ++index)
return parentNodes
} function findParent (node, parentNodes, tree) {
for (let i = 0; i < tree.length; i++) {
let item = tree[i]
if (item.id === node.fid) {
parentNodes.push(item)
return
}
if (item.children && item.children.length > 0) {
findParent(node, parentNodes, item.children)
}
}
} export default findAllParent

调用方式

import findParentNodes from './test'
let menuTreeData = [
  {
    id: 1,
    fid: 0,
    name: '1',
    children: [
{
id: 11,
fid: 1,
name: '1-1',
children: [
{ id: 111, fid: 11, name: '1-1-1' },
{ id: 112, fid: 11, name: '1-1-2' }
]
},
      { id: 12, fid: 1, name: '1-2' }
    ]
  },
  { id: 2, fid: 0, name: '2' }
]
let nodes = []
let parentNodes = findParentNodes({ id: 112, fid: 11 }, menuTreeData, nodes)
console.error('tag', nodes.map(item => item.name))
console.error('tag', parentNodes.map(item => item.name))

两种方式都可以获取到祖先节点的值

JS获取树的父节点及祖先节点的更多相关文章

  1. jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...

  2. JS 查找数组的父节点及祖先节点

    function findAllParent(node, tree, parentNodes=[], index = 0){ if(!node || node.parentId === 0){ ret ...

  3. js获取iframe和父级之间元素,方法、属,获取iframe的高度自适应iframe高度

    摘自:http://blog.csdn.net/kongjiea/article/details/38870399 1.在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测 ...

  4. MySql获取树型结构的所有子节点

    stackoverflow的解决方案,亲测有效: SELECT * FROM person WHERE department IN (SELECT department_id FROM departm ...

  5. CSS 子节点继承父节点(祖先节点)的样式

    CSS 有些属性可以让子节点从父节点或祖先节点继承,文本.字体.列表属性等样式都可以被子节点继承.子节点没有自身的样式,子节点将继承父节点或祖先节点的样式. <ul class="co ...

  6. JS获取节点的兄弟,父级,子级元素的方法(js获取子级获取到换行与空格元素-FF)

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 < ...

  7. JS获取与遍历节点的兄弟父级

    发布:脚本学堂/JavaScript  编辑:JB01   2014-01-23 15:40:11  [大 中 小] 介绍下js获取节点的兄弟.父级与子元素的方法,学习下js遍历节点的操作方法,有需要 ...

  8. JS获取节点的兄弟,父级,子级元素

    https://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作 ...

  9. 总结获取原生JS(javascript)的父节点、子节点、兄弟节点

    关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...

随机推荐

  1. java 注解的几大作用及使用方法详解

    初学者可以这样理解注解:想像代码具有生命,注解就是对于代码中某些鲜活个体的贴上去的一张标签.简化来讲,注解如同一张标签. 在未开始学习任何注解具体语法而言,你可以把注解看成一张标签.这有助于你快速地理 ...

  2. 什么是内容分发CDN

    一.简介 CDN全称:Content Delivery Network或Content Ddistribute Network,即内容分发网络 基本思路: 尽可能避开互联网上有可能影响数据传输速度和稳 ...

  3. java中注释、关键字、标识符,数据类型(上)

    一.java中的注释(有3种) 注释:是给写代码的人看的,注释不会被执行 单行注释:用符号"//"实现 多行注释:用"/* */ " 实现 javaDoc(文档 ...

  4. 几种Windows进程通信

    32位Windows采用虚拟内存技术使每个进程虚拟4G内存,在逻辑上实现了对进程之间数据代码的分离与保护.那么相应的进程之间的通信也就有必要整理掌握一下. Windows进程间通讯的方法有很多:管道. ...

  5. 十年后回到百年前?(Excel技巧集团)

    在单元格里输入日期,有时可以偷懒,比如明年的日期可以输入至少一位的年+横杠(或斜杠)+至少一位的月+横杠(或斜杠)+至少一位的日,也就是"21-1-1",单元格里就会自动显示&qu ...

  6. jetbrain家的fleet(已获得预览权限)直接对标vscode , fleet有望超过vscode吗?今天我们实际操作下

    申请预览版 等待了一周终于得到了预览版的机会 今天就来简单使用下. 前言 工程管理大多使用的是maven , 在maven之前还有ant 这个应该已经没多少人在使用了,或者说新人基本不在使用ant , ...

  7. CF1106A Lunar New Year and Cross Counting 题解

    Content 试求出在一个 \(n\times n\) 的地图 \(M\) 中,满足 \(1\leqslant i,j\leqslant n\) 且 \(M_{i,j}=M_{i+1,j+1}=M_ ...

  8. Tornado 的安全性保障机制Cookie XSRF跨站请求伪造阻断 &用户验证机制

    6.1 Cookie 对于RequestHandler,除了在第二章中讲到的之外,还提供了操作cookie的方法. 设置/获取 注意:Cookie 在浏览器调试时, 只有在第一次访问该网站的时候获取到 ...

  9. IDEA 无法显示 Run Dashboard 的解决方法

    前言 最近开始接触微服务的项目,项目很多有时候本地调测需要启动多个项目,看到同事都是使用dashboard管理项目,服务和端口排列的整整齐齐.但是我dashboard里面啥都没有,一顿百度最后解决问题 ...

  10. 【LeetCode】1022. Smallest Integer Divisible by K 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...