Javascript 使用数组创建Div-Dom元素

我下面有一段代码，它有一个

多维数组

，我正在使用这个

数组

动态创建

DOM元素

来填充我的

HTML选项卡

现在的问题是，我正试图使用我的['cabiods']数组将它附加到

选项卡

中的每个名称下面

我使用foreach循环使每个[

数组值都有自己的div标记。但我不知道如何使用每个div将其附加到名称下面。如有任何建议，将不胜感激。


var personArr=[]；
var person={[“名字”]：“约翰”、[“姓氏”]：“多伊”、[“年龄”]：21、[“爱好”]：[“足球”、“游泳”、“跳舞”]，
[“person desc”]：“
培根ipsum dolor amet短腰肉doner尾部肉饼汉堡肉干
boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
变量person2={
[“名字]：“保罗”，
[“姓氏”]：“洛根”，
[“年龄”]：22，
[“爱好”]：[“露营”、“睡觉”、“吃饭”]，
[“人物描述]：“培根ipsum dolor amet短腰肉doner尾部肉糕汉堡肉干boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
变量person3={
[“名字]：“肖恩”，
[“姓”]：“金”，
[“年龄”]：32，
[“爱好”]：[“跑步”、“慢跑”、“攀岩”]，
[“人物描述]：“培根ipsum dolor amet短腰肉doner尾部肉糕汉堡肉干boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
变量person4={
[“名字]：“肯”，
[“姓氏]：“周”，
[“年龄”]：12，
[“爱好”]：[“体操”、“电影”、“电视”]，
[“人物描述]：“培根ipsum dolor amet短腰肉doner尾部肉糕汉堡肉干boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
人推（人，人2，人3，人4）；
console.log（personArr）；
var$parent=$（'.line1'）.eq（0）；
每个人（（个人，我）=>{
变量$name=$（''）；
变量$desc=$（“
”）；
var$hobbie=$（''）；
var hobbieArray=''；
每人$。个人[‘爱好]，职能（索引）{
hobbieArray+=（''+个人['爱好][索引]+''）；
});
$name.html（`${person['first-name']}${person['last-name']}`）；
$desc.html（`${person['person-desc']}`）；
$parent.append（$name）.append（$desc）.append（$hobbie）；
});
//
函数openCity（evt、cityName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i
body{font-family:Arial；}
/*设置选项卡的样式*/
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f1f1；
}
/*设置选项卡内按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}
.line1{
显示：内联块；
}
.尺寸{
宽度：50%；
}
a、 莫林克{
文字装饰：无；
大纲：无；
}
.Morespan内容{
显示：无；
}

人
只需将
hobbie数组
（这是一个HTML字符串，不是数组）插入
$hobbie
元素中即可。像在其他地方一样使用
.html

var hobbieHTML = '';
$.each(person['hobbies'], function (index) {
    hobbieHTML += ('<div class="hobclass ">' + person['hobbies'][index] + '</div>');
});
$hobbie.html( hobbieHTML );

定义对象键时，您永远不需要同时使用
[]
和
“”
。只有当密钥具有特殊字符时，才需要
“”
。如果可以的话，通常最好不使用特殊字符来命名密钥

var person2 = {
    firstName: "Paul",
    lastName: "Logan",
    age: 22,
    hobbies: [ "camping", "sleeping", "eating" ],
    description: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};

现在使用点表示法更容易访问对象的属性。您还可以使用本机的
数组.forEach
而不是jQuery的
$。每个

person.hobbies.forEach( function ( hobby ) {
    var $h = $('<div/>').addClass('hobclass').text( hobby );
    $hobbie.append( $h );
})
$name.html(` ${ person.firstName } ${ person.lastName }`);
$desc.html(` ${ person.description }`);

person.cabiods.forEach（函数（爱好）{
var$h=$（''）.addClass（'hobclass'）.text（爱好）；
$hobbie.append（$h）；
})
$name.html（`${person.firstName}${person.lastName}`）；
$desc.html（`${person.description}`）；
只需将
hobbie数组
（这是一个HTML字符串，不是数组）插入
$hobbie
元素中即可。像在其他地方一样使用
.html

var hobbieHTML = '';
$.each(person['hobbies'], function (index) {
    hobbieHTML += ('<div class="hobclass ">' + person['hobbies'][index] + '</div>');
});
$hobbie.html( hobbieHTML );

定义对象键时，您永远不需要同时使用
[]
和
“”
。只有当密钥具有特殊字符时，才需要
“”
。如果可以的话，通常最好不使用特殊字符来命名密钥

var person2 = {
    firstName: "Paul",
    lastName: "Logan",
    age: 22,
    hobbies: [ "camping", "sleeping", "eating" ],
    description: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};

现在使用点表示法更容易访问对象的属性。您还可以使用本机的
数组.forEach
而不是jQuery的
$。每个

person.hobbies.forEach( function ( hobby ) {
    var $h = $('<div/>').addClass('hobclass').text( hobby );
    $hobbie.append( $h );
})
$name.html(` ${ person.firstName } ${ person.lastName }`);
$desc.html(` ${ person.description }`);

person.cabiods.forEach（函数（爱好）{
var$h=$（''）.addClass（'hobclass'）.text（爱好）；
$hobbie.append（$h）；
})
$name.html（`${person.firstName}${person.lastName}`）；
$desc.html（`${person.description}`）；
在你的代码中，$hobbie
没有什么可显示的。您正在使用
hobbiearray
构造div，我已经更新了您的代码，这就是您想要的吗

更新的代码片段

var $hobbieArray = '<div>';
        $.each(person['hobbies'], function (index) {
        $hobbieArray += ('<div class="hobclass ">' + person['hobbies'][index] + '</div>');
        });
$hobbieArray += '</div>'


人员测试
在你的代码中，$hobbie
没有什么可显示的。您正在使用
hobbiearray
构造div，我已经更新了您的代码，这就是您想要的吗

更新的代码片段

var $hobbieArray = '<div>';
        $.each(person['hobbies'], function (index) {
        $hobbieArray += ('<div class="hobclass ">' + person['hobbies'][index] + '</div>');
        });
$hobbieArray += '</div>'


人员测试
移动
变量数组的声明