时间戳

首页 > 解决方案 > 使用数组创建 Div Dom 元素

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

问题描述

我在下面有这段代码，Multidimensional Array我正在使用它array来动态创建DOM elements以填充我HTML Tab现在的问题是我正在尝试使用我的 ['hobbies'] 数组将它附加到tab.

我使用了一个 foreach 循环来使每个 [ hobbies] 数组值都有自己的 div 标签。但我不确定如何使用每个 div 将其附加到名称下方。任何建议将不胜感激。 在此处输入图像描述

var personArr = [];
var person = {["first-Name"]: "John", ["last-Name"]: "Doe", ["age"]: 21, ["hobbies"]:["football","swimming","dancing"],
  ["person-desc"]: "<br />Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky <br />boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person2 = {
  ["first-Name"]: "Paul",
  ["last-Name"]: "Logan",
  ["age"]: 22,
  ["hobbies"]:["camping","sleeping","eating"],
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};
var person3 = {
  ["first-Name"]: "Sean",
  ["last-Name"]: "Kim",
  ["age"]: 32,
  ["hobbies"]:["running","jogging","climbing"],
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person4 = {
  ["first-Name"]: "Ken",
  ["last-Name"]: "Chow",
  ["age"]: 12,
  ["hobbies"]:["gyming","movies","tv"],
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};

personArr.push(person, person2, person3, person4);
console.log(personArr);
var $parent = $('.line1').eq(0);



personArr.forEach((person, i) => {
  var $name = $('<h4/>');
  var $desc = $('<p/>');
  var $hobbie = $('<div/>');
	
	
  var hobbieArray = '';
	$.each(person['hobbies'], function (index) {
    hobbieArray += ('<div class="hobclass ">' + person['hobbies'][index] + '</div>');
	});
  
  $name.html(` ${person['first-Name']} ${person['last-Name']}`);
  $desc.html(` ${person['person-desc']}`);
  $parent.append($name).append($desc).append($hobbie);

});


//<---------------------------------------------- TAB FUNCTION ------------------------------------------------------->
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
body {font-family: Arial;}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.line1{
display:inline-block;
}
.size{
width:50%;
}
a.morelink {
	text-decoration:none;
	outline: none;
}
.morecontent span {
	display: none;

}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
<div class ="size">
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button>
</div>

<div id="People" class="tabcontent">
<div class="line1"> 

 </div>
 </div>
</div>

</body>
</html>

标签： javascriptjqueryhtmlarrays

解决方案

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

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

使用 JS 编写 HTML 有点笨拙，使用元素通常更容易（就像您已经使用$nameand一样$desc）

$.each(person['hobbies'], function (index) {
    var $h = $('<div/>').addClass('hobclass').text( person['hobbies'][index] );
    $hobbie.append( $h );
});

定义对象键时，您永远不需要同时使用[]和""。仅""当密钥具有特殊字符时才需要。如果可以的话，通常最好在没有特殊字符的情况下命名您的键。

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. "
};

现在使用点符号更容易访问对象的属性。您也可以使用本机Array.forEach而不是 jQuery 的$.each.

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

推荐阅读