Question

我有以下数组...

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>

我一直试图在网上找到关于如何实现这一点的建议，但我能找到的大部分建议更适合用于显示数据网格类型的布局而不是标题的多维数组。子项目结构。

由于

Answer 1

您可以使用嵌套的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>

Answer 2

由于您没有提及最新图标，我只是假设您正在尝试为每个菜单提供图像图标。有了这个假设，试试这个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>

Answer 3

我曾尝试在代码工作之后编写一个类似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>

你可以留下第二个参数，在这种情况下输出字符串将被返回。如果你传递一个dom元素，输出将被写入其中。

Answer 4

我已经成功解决了我想要实现的目标......

＆＃13;

<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>

＆＃13;

此代码允许我根据需要在文字数组中添加任意数量的部分和项目。

循环遍历Javascript数组

4 个答案: