zoukankan      html  css  js  c++  java
  • js 递归获取多层树的某个节点

    两种方法,废话不多说,直接上代码。

    第一种,函数里套函数用法

    var data = [
            {
                text: 'Item1',
                iconCls: 'icon-more',
                id:1,
                children: [
                    {
                        text: 'option1',
                        url: '/datalist.html?id=1',
                        id: 2
                    },
                    {
                        text: 'option2',
                        url: '/datalist.html?id=2',
                        id: 3
                    },
                    {
                        text: 'option3',
                        url: '/datalist.html?id=3',
                        id: 4
                    },
                ]
            },
            {
                text: 'Item2',
                iconCls: 'icon-more',
                id:5,
                children: [
                    {
                        text: 'option4',
                        url: '/datalist.html?id=4',
                        id: 6
                    },
                    {
                        text: 'option5',
                        url: '/datalist.html?id=5',
                        id: 7
                    },
                    {
                        text: 'option6',
                        url: '/datalist.html?id=6',
                        id: 8
                    },
                ]
            },
            {
                text: 'Item3',
                iconCls: 'icon-more',
                id:9,
                children: [
                    {
                        text: 'option7',
                        url: '/datalist.html?id=7',
                        id: 10
                    },
                    {
                        text: 'option8',
                        url: '/datalist.html?id=8',
                        id: 11
                    },
                    {
                        text: 'option9',
                        url: '/datalist.html?id=9',
                        id: 12
                    },
                ]
            },
            {
                text: 'Item4',
                iconCls: 'icon-more',
                id:13,
                children: [
                    {
                        text: 'option10',
                        url: '/datalist.html?id=10',
                        id: 13
                    },
                    {
                        text: 'option11',
                        url: '/datalist.html?id=11',
                        id: 14
                    },
                    {
                        text: 'option12',
                        url: '/datalist.html?id=12',
                        id: 15
                    },
                ]
            },
            {
                text: 'Item5',
                iconCls: 'icon-more',
                id:16,
                children: [
                    {
                        text: 'option13',
                        url: '/datalist.html?id=13',
                        id: 17
                    },
                    {
                        text: 'option14',
                        url: '/datalist.html?id=14',
                        id: 18
                    },
                    {
                        text: 'option15',
                        url: '/datalist.html?id=15',
                        id: 19
                    },
                ]
            },
            {
                text: 'Item6',
                iconCls: 'icon-more',
                id:20,
                children: [
                    {
                        text: 'option16',
                        url: '/datalist.html?id=16',
                        id: 21
                    },
                    {
                        text: 'option17',
                        url: '/datalist.html?id=17',
                        id: 22
                    },
                    {
                        text: 'option18',
                        url: '/datalist.html?id=18',
                        id: 23
                    },
                    {
                        text: 'option19',
                        url: '/datalist.html?id=19',
                        id: 24
                    },
                    {
                        text: 'option20',
                        url: '/datalist.html?id=20',
                        id: 25
                    },
                    {
                        text: 'option21',
                        url: '/datalist.html?id=21',
                        id: 26
                    },
                ]
            },
        ];
    var hash = '/datalist.html?id=21';
    var current = getTarget(hash,data)
        console.log(current)
    function getTarget(target,data){
        var obj = {};
        function each(target,data){
            for(var i = 0; i < data.length; i++){
                if(data[i].url == target){
                    obj = data[i]
                }else if(('children' in data[i]) && data[i].children.length > 0){
                    each(target,data[i].children)
                }
            }
        }
        each(target,data)
        return obj;
    }

    第二种方法,使用callback

    var data = [
            {
                text: 'Item1',
                iconCls: 'icon-more',
                id:1,
                children: [
                    {
                        text: 'option1',
                        url: '/datalist.html?id=1',
                        id: 2
                    },
                    {
                        text: 'option2',
                        url: '/datalist.html?id=2',
                        id: 3
                    },
                    {
                        text: 'option3',
                        url: '/datalist.html?id=3',
                        id: 4
                    },
                ]
            },
            {
                text: 'Item2',
                iconCls: 'icon-more',
                id:5,
                children: [
                    {
                        text: 'option4',
                        url: '/datalist.html?id=4',
                        id: 6
                    },
                    {
                        text: 'option5',
                        url: '/datalist.html?id=5',
                        id: 7
                    },
                    {
                        text: 'option6',
                        url: '/datalist.html?id=6',
                        id: 8
                    },
                ]
            },
            {
                text: 'Item3',
                iconCls: 'icon-more',
                id:9,
                children: [
                    {
                        text: 'option7',
                        url: '/datalist.html?id=7',
                        id: 10
                    },
                    {
                        text: 'option8',
                        url: '/datalist.html?id=8',
                        id: 11
                    },
                    {
                        text: 'option9',
                        url: '/datalist.html?id=9',
                        id: 12
                    },
                ]
            },
            {
                text: 'Item4',
                iconCls: 'icon-more',
                id:13,
                children: [
                    {
                        text: 'option10',
                        url: '/datalist.html?id=10',
                        id: 13
                    },
                    {
                        text: 'option11',
                        url: '/datalist.html?id=11',
                        id: 14
                    },
                    {
                        text: 'option12',
                        url: '/datalist.html?id=12',
                        id: 15
                    },
                ]
            },
            {
                text: 'Item5',
                iconCls: 'icon-more',
                id:16,
                children: [
                    {
                        text: 'option13',
                        url: '/datalist.html?id=13',
                        id: 17
                    },
                    {
                        text: 'option14',
                        url: '/datalist.html?id=14',
                        id: 18
                    },
                    {
                        text: 'option15',
                        url: '/datalist.html?id=15',
                        id: 19
                    },
                ]
            },
            {
                text: 'Item6',
                iconCls: 'icon-more',
                id:20,
                children: [
                    {
                        text: 'option16',
                        url: '/datalist.html?id=16',
                        id: 21
                    },
                    {
                        text: 'option17',
                        url: '/datalist.html?id=17',
                        id: 22
                    },
                    {
                        text: 'option18',
                        url: '/datalist.html?id=18',
                        id: 23
                    },
                    {
                        text: 'option19',
                        url: '/datalist.html?id=19',
                        id: 24
                    },
                    {
                        text: 'option20',
                        url: '/datalist.html?id=20',
                        id: 25
                    },
                    {
                        text: 'option21',
                        url: '/datalist.html?id=21',
                        id: 26
                    },
                ]
            },
        ];
    var hash = '/datalist.html?id=21';
    var target = {};
    getTarget(hash,data,(res)=>{
        target = res
    })
    console.log(target)
    function getTarget(target,data,callback){
        for(var i = 0; i < data.length;i++){
            if(data[i].url == target){
                return callback(data[i])
            }else if(('children' in data[i]) && data[i].children.length > 0){
                getTarget(target,data[i].children,callback)
            }
        }
    }
    

      应该能够看懂吧

  • 相关阅读:
    [记录点滴] 一个解决Lua 随机数生成问题的办法
    [源码解析] 从TimeoutException看Flink的心跳机制
    [记录点滴] OpenResty中Redis操作总结
    [记录点滴] 小心 Hadoop Speculative 调度策略
    [源码解析] GroupReduce,GroupCombine 和 Flink SQL group by
    第28 章 : 理解容器运行时接口 CRI
    第27 章 : Kubernetes 安全之访问控制
    第26 章 : 理解 CNI 和 CNI 插件
    第25 章 : Kubernetes 网络模型进阶
    第24 章 : Kubernetes API 编程利器:Operator 和 Operator Framework
  • 原文地址:https://www.cnblogs.com/dayin1/p/14714623.html
Copyright © 2011-2022 走看看