JS获取树的父节点及祖先节点
主体函数
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获取树的父节点及祖先节点的更多相关文章
- jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...
- JS 查找数组的父节点及祖先节点
function findAllParent(node, tree, parentNodes=[], index = 0){ if(!node || node.parentId === 0){ ret ...
- js获取iframe和父级之间元素,方法、属,获取iframe的高度自适应iframe高度
摘自:http://blog.csdn.net/kongjiea/article/details/38870399 1.在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测 ...
- MySql获取树型结构的所有子节点
stackoverflow的解决方案,亲测有效: SELECT * FROM person WHERE department IN (SELECT department_id FROM departm ...
- CSS 子节点继承父节点(祖先节点)的样式
CSS 有些属性可以让子节点从父节点或祖先节点继承,文本.字体.列表属性等样式都可以被子节点继承.子节点没有自身的样式,子节点将继承父节点或祖先节点的样式. <ul class="co ...
- JS获取节点的兄弟,父级,子级元素的方法(js获取子级获取到换行与空格元素-FF)
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 < ...
- JS获取与遍历节点的兄弟父级
发布:脚本学堂/JavaScript 编辑:JB01 2014-01-23 15:40:11 [大 中 小] 介绍下js获取节点的兄弟.父级与子元素的方法,学习下js遍历节点的操作方法,有需要 ...
- JS获取节点的兄弟,父级,子级元素
https://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作 ...
- 总结获取原生JS(javascript)的父节点、子节点、兄弟节点
关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...
随机推荐
- WHUCTF PWN题目
花了大概两天时间来做WHUCTF的题目,第一次排名这么靠前.首先感谢武汉大学举办这次萌新赛,也感谢fmyy的师傅的耐心指导,让我第一次做出堆的题目来. pwnpwnpwn 这是一道栈题目,32位程序, ...
- 解决Tomcat10.0.12源码编译问题进而剖析其优秀分层设计架构
概述 Tomcat.Jetty.Undertow这几个都是非常有名实现Servlet规范的应用服务器,Tomcat本身也是业界上非常优秀的中间件,简单可将Tomcat看成是一个Http服务器+Serv ...
- 对ORM的理解
1. 在面试中可能会问到这个问题,什么是ORM? ORM是对象关系映射(Object Relational Mapping),简称ORM,或O/RM,或O/R mapping,是一种程序技术. 白话理 ...
- CF1130A Be Positive 题解
Content 有一个长度为 \(n\) 的数组 \(a_1,a_2,a_3,...,a_n\),试找出一个数 \(d\),使得数组中的每个数除以 \(d\) 得到的 \(n\) 个结果中至少有 \( ...
- CF20C Dijkstra? 题解
Content 给定一张 \(n\) 个点 \(m\) 条边的无向图,请判断是否有一条可行的从 \(1\) 到 \(n\) 的路径,有的话输出长度最短的,没有的话输出 -1. 数据范围:\(2\leq ...
- Java 数据类型:集合接口Map:HashTable;HashMap;IdentityHashMap;LinkedHashMap;Properties类读取配置文件;SortedMap接口和TreeMap实现类:【线程安全的ConcurrentHashMap】
Map集合java.util.Map Map用于保存具有映射关系的数据,因此Map集合里保存着两个值,一个是用于保存Map里的key,另外一组值用于保存Map里的value.key和value都可以是 ...
- 更换vue项目中标签页icon
问题:在vue项目中, 需要将标签上的icon换成自己所需的,发现在更换了public/favicon.ico后,没有生效,依旧是原来Vue的icon. 解决办法:在vue.config.js中,修改 ...
- JAVA发送xml格式的接口请求
/** * * @param urlStr 接口地址 * @param xmlInfo xml格式参数数据 * @return */ public static String sendMsgXml(S ...
- JAVA中json对象转JAVA对象,JSON数组(JSONArray)转集合(List)
json格式 {userId:'1',message:'2',create_time:'2020-03-28 20:58:11',create_date:'2020-03-28'}JAVA对象 Cha ...
- JAVA获取当前请求的URL地址,包含请求链接中的参数
/** * 获得当前访问的URL路径 * @param request * @return */ public static String getLocation(HttpServletRequest ...