遍历Javascript数组
[英]Loop through Javascript Array
问题描述
I have the following array... 
我有以下数组...
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"]
]
];
And I would like to loop through it to populate my HTML structure in the following method... 我想通过以下方法遍历它来填充我的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>
I have been trying to find advice online about how to achieve this but most of the advice I have been able to find is more suited to multi-dimensional arrays which are used to show a data grid type of layout rather than heading and sub item structures. 我一直在尝试在线查找有关如何实现此目标的建议，但是我能够找到的大多数建议更适合用于多维数组，这些多维数组用于显示布局的数据网格类型，而不是标题和子项结构。
Thanks 谢谢
4 个解决方案
解决方案1
1 2015-03-09 06:40:27
You can use nested for loops to do this. 您可以使用嵌套的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>
解决方案2
0 2015-03-09 05:52:37
Since you are not mentioning whats icon, I just assume that you are trying to give an image icon for each menu. 由于您没有提及“图标”，因此我假设您尝试为每个菜单提供一个图像图标。 With this assumption, try this html, 在这种假设下，请尝试使用此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>
解决方案3
0 2015-03-09 06:02:42
I once tried to write one js library like this.hope following code works.include it like below 我曾经尝试编写一个像这样的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>
you can leave second argument, in that case output string will be returned .if you pass an dom element ,output will be written inside it. 您可以保留第二个参数，在这种情况下，将返回输出字符串。如果您传递dom元素，则会在其中写入输出。
解决方案4
0 2015-03-09 06:51:46
I have manged to work out what I was wanting to achieve... 我已经努力解决我想要达到的目标...
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Array</title> </head> <body> <div id="section"> </div> <script> var structure3 = [ ["icon.jpg", "Section 1 Name", [ ["icon", "Item 1.1"], ["icon", "Item 1.2"] ] ], ["icon", "Section 2 Name", [ ["icon", "Item 2.1"], ["icon", "Item 2.2"], ["icon", "Item 2.3"] ] ] ]; var div = ''; for(i = 0; i < structure3.length; i++) { div += '<h1>' + structure3[i][1] + '(' + structure3[i][2].length + ')</h1>'; for(m = 0; m < structure3[i][2].length; m++) { div += '<a href="#">' + structure3[i][2][m][1] + '</a><br />'; }; }; var element = document.getElementById("section").innerHTML = div; </script> </body> </html>
This code will allow me to add as many sections and items as needed into the literal array. 此代码将使我可以根据需要在文字数组中添加任意数量的部分和项目。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.