• jquery无限级创建DOM节点


    代码实现:

    var data=[{"tag":"ul","attr":{"class":"ban_nav","id":"ban"},
                "child":[
                    {"tag":"li",
                        "child":[
                            {"tag":"a","attr":{"href":"activeNet.html","target":"_blank"},
                                "child":[
                                    {"text":"第一个","tag":"span"},
                                    {"text":"第二个","tag":"span"},
                                    {"text":"第三个","tag":"span"},
                                ]
                            },
                            {"tag":"a","attr":{"href":"activeNet.html","target":"_blank"},
                                "child":[
                                    {"tag":"img","attr":{"src":"images/banner5.png"}},
                                    {"tag":"img","attr":{"src":"images/banner5.png"}},
                                    {"tag":"img","attr":{"src":"images/banner5.png"}}
                                ]
                            }
                        ]
                    },
                    {"tag":"li",
                        "child":[
                            {"tag":"a","attr":{"href":"activeNet.html","target":"_blank"},
                                "child":[
                                    {"tag":"img","attr":{"src":"images/activeNet/banner.png"}}
                                ]
                            }
                        ]
                    }
                    
                ]
            },
            {"tag":'a'}
            ]
            
            $(function(){
                setData('banner',data);  
            })
            function setData(name,data){
                var l=$('<span/>');
                createDOM(data,l)
                $('coder[name="'+name+'"]').html(l);
            }
            /*
             * 无限级创建DOM节点
             * @param {Object} opt 参数对象
             * @param {Object} parent 父级容器
             */
            function createDOM(opt,parent){
                $.each(opt, function(k,v) {   
                    var _e={},l;
                    /*存在内容时进行赋值,有些是没有的如:img*/
                      v['text'] && (_e.text=v['text']);
                      /*存在属性时进行赋值,以键/值配对出现*/
                    v['attr'] && (_e=$.extend({},_e,v['attr']));
                    /*创建dom节点*/
                    l=v.tag? $('<'+v['tag']+'/>',_e):v['text'];
                    parent.append(l);
                    /*存在子节点时,进行递归*/
                    if(v['child']){
                        createDOM(v['child'],l);
                    }
                });
            }
    View Code

    html部分:

    <coder name="banner"></coder>

  • 相关阅读:
    记录排序算法
    Redis 记录
    ELK Windows环境 强行记录
    前端组件 bootstrap-select 下拉 多选 搜索
    记一次微信点赞小网站的事故
    来自加班的吐槽
    .net 比较器
    做一个.net core 小项目 遇到的一些坑
    即使通讯架构
    resultMap 映射
  • 原文地址:https://www.cnblogs.com/lihui1030/p/4773447.html
Copyright © 2020-2023  润新知