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獲取父級節點元素內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JS使用reduce()方法處理樹形結構數據
- JavaScript前端實用的工具函數封裝
- JavaScript中關於遞歸與回溯的實例詳解
- Vue Element前端應用開發之常規的JS處理函數
- antd為Tree組件標題附加操作按鈕功能