Loop через Javascript массив

У меня есть следующий массив ...Loop через Javascript массив

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>

I пытались найти советы в Интернете о том, как этого достичь, но большинство рекомендаций, которые я смог найти, больше подходят для многомерных массивов, которые используются для отображения типа сетки данных, а не структуры заголовка и подтипа.

Благодаря

источник

2015-03-09 Chris Rutherfurd

Почему вы не можете попробовать с jQuery? – Butterfly

Какая ценность 'icon' здесь? –

Значок просто будет кодировкой данных base64 значка, который будет помещен непосредственно в img src позднее, для простоты был опущен для этого примера. –

Поскольку вы не упомянуть WHATS значок, я просто предполагаю, что вы пытаетесь дать значок изображения для каждого меню. При таком предположении, попробуйте этот 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>

источник

2015-03-09 05:52:37 Butterfly

Пробовал образец, который у вас есть, но он запустил вывод каждого имени и элемента раздела как элемент h1, а затем повторил его дважды как элемент гиперссылки, вместо того, чтобы иметь имена разделов в качестве элементов h1 и элементов ниже этих имен разделов в виде гиперссылок только в родительском разделе. –

Попробуйте мой отредактированный код, я пропустил изображение, заменил изображение img src .. – Butterfly

Вы пробовали мой последний отредактированный код – Butterfly

Я однажды пытался написать одну библиотеку JS, как this.hope следующий код works.include его, как показано ниже

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

вы можете оставить второй аргумент в том, что будет возвращена строка вывода case. Если вы передадите элемент dom, вывод будет записан внутри него.

источник

2015-03-09 06:02:42 balajisoundar

Для этого вы можете использовать вложенные петли 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>

источник

2015-03-09 06:40:27 nkron

Я сведущих работать, что я хотел добиться ...

<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 = [ 
 
\t ["icon.jpg", "Section 1 Name", 
 
\t \t [ 
 
\t \t \t ["icon", "Item 1.1"], 
 
\t \t \t ["icon", "Item 1.2"] 
 
\t \t ] 
 
\t ], 
 
\t ["icon", "Section 2 Name", 
 
\t \t [ 
 
\t \t \t ["icon", "Item 2.1"], 
 
\t \t \t ["icon", "Item 2.2"], 
 
\t \t \t ["icon", "Item 2.3"] 
 
\t \t ] 
 
\t ] 
 
]; 
 
var div = ''; 
 
for(i = 0; i < structure3.length; i++) { 
 
\t div += '<h1>' + structure3[i][1] + '(' + structure3[i][2].length + ')</h1>'; 
 
\t for(m = 0; m < structure3[i][2].length; m++) { 
 
\t \t div += '<a href="#">' + structure3[i][2][m][1] + '</a><br />'; 
 
\t }; 
 
}; 
 
var element = document.getElementById("section").innerHTML = div; 
 
    </script> 
 
    </body> 
 
</html>

Этот код позволит мне добавить столько, сколько разделов и элементов по мере необходимости в массиве literal.

источник

2015-03-09 06:51:46

Loop через Javascript массив

ответ

Смежные вопросы