jquery無限級建立DOM節點

時間 2019-11-18

標籤 jquery 無限建立 dom 節點欄目 JQuery 简体版

原文原文鏈接

代碼實現：html

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);
                }
            });
        }