码迷,mamicode.com
首页 > Web开发 > 详细

jquery无限级创建DOM节点

时间:2015-08-31 18:50:36      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

代码实现:

技术分享
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>

jquery无限级创建DOM节点

标签:

原文地址:http://www.cnblogs.com/lihui1030/p/4773447.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!