遍历Javascript数组
遍历Javascript数组
提问于 2015-03-09 13:36:34
我有以下数组...
var structure = [
[icon, "Section 1 Name",
[icon, "Item 1.1"],
[icon, "Item 1.2"]
],
[icon, "Section 2 Name",
[icon, "Item 2.1"],
[icon, "Item 2.2"]
],
[icon, "Section 3 Name",
[icon, "Item 3.1"],
[icon, "Item 3.2"]
]
];我想用下面的方法遍历它来填充我的HTML结构...
<div id="section">
<h1>Section 1 Name</h1>
<a href="#">Menu Item 1.1</a><br />
<a href="#">Menu Item 1.2</a>
<h1>Section 2 Name</h1>
<a href="#">Menu Item 2.1</a><br />
<a href="#">Menu Item 2.2</a>
<h1>Section 3 Name</h1>
<a href="#">Menu Item 3.1</a><br />
<a href="#">Menu Item 3.2</a>
</div>我一直试图在网上寻找关于如何实现这一点的建议，但我能找到的大多数建议都更适合多维数组，多维数组用于显示布局的数据网格类型，而不是标题和子项结构。
谢谢
回答 4
Stack Overflow用户
发布于 2015-03-09 14:40:27
您可以使用嵌套的for循环来完成此操作。
<pre id="output"></pre>
<script>
var icon='';
var structure = [
[icon, "Section 1 Name",
[icon, "Item 1.1"],
[icon, "Item 1.2"]
],
[icon, "Section 2 Name",
[icon, "Item 2.1"],
[icon, "Item 2.2"]
],
[icon, "Section 3 Name",
[icon, "Item 3.1"],
[icon, "Item 3.2"]
]
];
var result = '<div id="section">\n';
for (var i = 0; i < structure.length; i++) {
var group = structure[i];
result += ' <h1>' + group[1] + '</h1>\n'
for (var j = 2; j < group.length; j++) {
result += ' <a href="#">' + group[j][1] + '</a>';
if (j < group.length - 1) {
result += '<br />';
}
result += '\n';
}
}
result += '</div>';
document.getElementById('output').textContent = result;
</script>
Stack Overflow用户
发布于 2015-03-09 13:52:37
既然你没有提到什么图标，我只是假设你正在尝试为每个菜单提供一个图像图标。有了这个假设，试试这个html，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
<title>Array</title>
</head>
<body>
<div id="section"> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
var structure = [
['icon.jpg', "Section 1 Name",
['icon.jpg', "Item 1.1"],
['icon.jpg', "Item 1.2"]
],
['icon.jpg', "Section 2 Name",
['icon.jpg', "Item 2.1"],
['icon.jpg', "Item 2.2"]
],
['icon.jpg', "Section 3 Name",
['icon.jpg', "Item 3.1"],
['icon.jpg', "Item 3.2"]
]
];
var divi = '';
for (i = 0; i < structure.length; i++) {
divi += '<h1>'+structure[i][1]+'</h1>';
var elemets = structure[i][2];
divi += '<a href="#">'+structure[i][2][1]+'</a><br /><a href="#">'+structure[i][3][1]+'</a>';
}
var element = document.getElementById("section").innerHTML = divi;
</script>
</html>Stack Overflow用户
发布于 2015-03-09 14:02:42
我曾经尝试用下面的代码works.include来编写一个像this.hope这样的js库
<script type="text/javascript" src="http://balajisoundar.github.io/javascripts/jom.js"></script>
<script type="text/javascript">
var obj={
tag:"div",id:"section",
children:[{tag:"h1",inner:"Section 1 Name"},
{tag:"a",href:"#",inner: "Item 1.1"},{tag:"br"},
{tag:"a",href:"#",inner: "Item 1.2"},
{tag:"h1",inner:"Section 1 Name"},
{tag:"a",href:"#",inner: "Item 1.1"},{tag:"br"},
{tag:"a",href:"#",inner: "Item 1.2"},
{tag:"h1",inner:"Section 1 Name"},
{tag:"a",href:"#",inner: "Item 1.1"},{tag:"br"},
{tag:"a",href:"#",inner: "Item 1.2"},
]
};
var test=jsonrender();
test.render(obj,document.querySelector("#test"));
</script>你可以留下第二个参数，在这种情况下，输出字符串将返回.if，当你传递一个dom元素时，输出将被写入其中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28935801
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号