Bootstrap

js递归实现多层级数组内获取兄弟节点id

js递归实现多层级数组内获取兄弟节点id

最近做了一个需求
列表内有多个层级
要求可以实现每一级的列表项的上下移动
需要在点击下移一层时
将当前列表项平级向下移动一个位置
移动这部操作是后端实现的

前端需要在点击下移时获取当前项id和后面第一个兄弟节点的id
以下操作实现获取兄弟节点的id

直接上代码Demo:

<button>点击</button>
<script>

let _btn = document.querySelector('button')


const _list = [
    {id:'1',parentId: null,level:1,name: '1a'},
    {id:'2',parentId: null,level:1,name: '1b'},
    {id:'3',parentId: null,level:1,name: '1c',children: [
        {id:'01',parentId: '3',level:2,name: '2a'},
        {id:'02',parentId: '3',level:2,name: '2b',children:[
            {id:'001',parentId: '02',level:3,name: '3a'},
            {id:'002',parentId: '02',level:3,name: '3b'},
            {id:'003',parentId: '02',level:3,name: '3c'},
            {id:'004',parentId: '02',level:3,name: '3d'},
            {id:'005',parentId: '02',level:3,name: '3e'},
        ]},
        {id:'03',parentId: '3',level:2,name: '2c'},
        {id:'04',parentId: '3',level:2,name: '2d'},
    ]},
]


var _id = '003'
var nextId = null

_btn.onclick = function () {
    
    
    var ParentId = getParentId(_list)

}

// 获取当前行信息
function getParentId(list) {
    list.forEach((item,ind)=> {
        // console.log(item.id, _id)
        if (item.id === _id) {
            console.log('======获取当前行信息:',list ,item)
            // 处理当前列表
            getNextId(list, item)
        }
        if (item.children) {
            getParentId(item.children)
        }
        
    })
}

// 获取当前列表
function getNextId (_list2,_item2) {
    _list2.forEach((item,ind)=> {
        if (item.id === _id) {
            console.log('当前index:',ind, ',当前id:', item.id)
            console.log('下级index:',ind+1, ',下级id:', _list2[ind+1].id)
        }
    })
}


</script>
;