如何使用jquery创建这些嵌套的dom元素？ [英] How do I create these nested dom elements with jquery?

问题描述

给定这些JavaScript变量：

  var div_id =my_div; 
 var h1_class =my_header; 
 var a_class =my_a_class; 
 var a_string =teststring; 
  

此页面元素：

 < div id =container>< / div> 
  

我想用jQuery构建这个html结构：

 < div id =container> 
< div id =my_div> 
< h1 class =my_header> 
< a href =/ test /class =my_a_class> teststring< / a> 
< / h1> 
< / div> 
< / div> 
  

在这里链接命令的最好和最可读的方法是什么？

解决方案

UPDATED

• DEMO： http://so.devilmaycode.it/how-do-i-create-these-nested-dom-elements-with-jquery/

JSON

  var widgets = [{
div：{
id：my-div-1
}，
h1：{
class：my-header
}，
a：{
class：my-a-class，
text谷歌，
href：http://www.google.com
} 
}，{
div：{
id ： my-div-2
}，
h1：{
class：my-header
}，
a 
class：my-a-class，
text：yahoo，
href：http://www.yahoo.com
} 
}]; 
 
 $（function（）{
 $ .each（widgets，function（i，item）{
 $（'< div>'） ，item.div.id）.html（
 $（'< h1>'）。attr（'class'，item.h1.class）.html（
 $（'< a& '）.attr（{
'href'：item.a.href，
'class'：item.a.class 
}）。text（item.a.text））） .appendTo（'＃container'）; 
}）; 
}）; 
  

Given these javascript variables:

var div_id = "my_div";
var h1_class = "my_header";
var a_class = "my_a_class";
var a_string = "teststring";

and this page element:

<div id="container"></div>

I want to build this html structure with jQuery:

<div id="container">
    <div id="my_div">
        <h1 class="my_header">
            <a href="/test/" class="my_a_class">teststring</a>
        </h1>
    </div>
</div>

What is the best and most readable way to chain the commands here?

解决方案

UPDATED

• DEMO: http://so.devilmaycode.it/how-do-i-create-these-nested-dom-elements-with-jquery/

JSON

        var widgets = [{
            "div" : {
                "id" : "my-div-1"
            },
            "h1" : {
                "class" : "my-header"
            },
            "a" : {
                "class" : "my-a-class",
                "text" : "google",
                "href" : "http://www.google.com"
            }
        }, {
            "div" : {
                "id" : "my-div-2"
            },
            "h1" : {
                "class" : "my-header"
            },
            "a" : {
                "class" : "my-a-class",
                "text" : "yahoo",
                "href" : "http://www.yahoo.com"
            }
        }];

        $(function() {
            $.each(widgets, function(i, item) {
                $('<div>').attr('id', item.div.id).html(
                $('<h1>').attr('class', item.h1.class).html(
                $('<a>').attr({
                    'href' : item.a.href,
                    'class' : item.a.class
                }).text(item.a.text))).appendTo('#container');
            });
        });

这篇关于如何使用jquery创建这些嵌套的dom元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！