经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JS树形结构根据id获取父级节点元素的示例代码
来源:jb51  时间:2023/5/15 9:00:39  对本文有异议

封装函数

  1. // 传入 id、树形结构数据
  2. export function getParentTree(id, tree) {
  3. let arr = [] //要返回的数组
  4. for (let i = 0; i < tree.length; i++) {
  5. let item = tree[i]
  6. arr = []
  7. arr.push(item) //保存当前节点id
  8. if (id== item.id) {
  9. //判断当前id是否是默认id
  10. return arr //是则退出循环、返回数据
  11. } else {
  12. //否则进入下面判断,判断当前节点是否有子节点数据
  13. if (item.children && item.children.length > 0) {
  14. //合并子节点返回的数据
  15. arr = arr.concat(getParentTree(id, item.children ? item.children : []))
  16. console.log(arr)
  17. if (arr.map(item2 => (item2 ? item2.id : '')).includes(id)) {
  18. //如果当前数据中已包含默认节点,则退出循环、返回数据
  19. return arr
  20. }
  21. }
  22. }
  23. }

调用函数

  1. const treeData = [{
  2. name: '1',
  3. id: 1,
  4. children: [{
  5. name: '1-1',
  6. id: 2,
  7. children: [{
  8. name: '1-1-1',
  9. id: 4,
  10. }],
  11. name: '1-2',
  12. id: 3,
  13. children: [{
  14. name: '1-2-1',
  15. id: 5,
  16. }],
  17. }]
  18. },{
  19. name: '2',
  20. id: 6,
  21. children: [{
  22. name: '2-1',
  23. id: 7,
  24. children: [{
  25. name: '2-1-1',
  26. id: 9,
  27. }],
  28. name: '2-2',
  29. id: 8,
  30. children: [{
  31. name: '2-2-1',
  32. id: 10,
  33. }],
  34. }]
  35. }]
  36. console.log(getParentTree(5, treeData))

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号