У меня есть массив.

var citycode = [
  ["In Milan", 0],
  ["Rom", 5],
  ["Modena", 6],
  ["Others", 20]
];

Как я могу вернуть значение из цикла For для этого массива, чтобы иметь:

<div class="loop"><span>In Milan</span><span>0</span> </div>
<div class="loop"><span>Rom</span><span>5</span> </div>
....

Большое спасибо.

2
Hai Tien 8 Дек 2016 в 12:57

5 ответов

Лучший ответ

Не быть педантичным, но OP попросил петлю ..

    var htmlContent = "";
            for (var i = 0; citycode.length > i; i++) {
              htmlContent += '<div class="loop"><span>' + citycode[i][0] + '</span><span>' + citycode[i][1] + '</span></div>'
    }
1
Pogrindis 8 Дек 2016 в 10:23
var citycode = [
  ["In Milan", 0],
  ["Rom", 5],
  ["Modena", 6],
  ["Others", 20]
];



for (var i = 0; i < citycode.length; i++) {
  for (var o = 0; o < citycode[i].length; o++) {

    console.log(citycode[i][o])

  }


}

Используйте 2 для цикла, чтобы получить каждый элемент

2
guradio 8 Дек 2016 в 10:02

Я думаю, Array.prototype.reduce() идеально подходит для этих работ. Вы можете сделать функционально следующим образом;

В основном ожидается, что вы будете работать не с DOM, а над фрагментом документа, и когда вы закончите свою работу, добавите фрагмент документа в правильное место в DOM одновременно.

var citycode = [["In Milan ", 0], ["Rom ", 5], ["Modena ", 6], ["Others ", 20]],
    mainDiv = document.getElementById("main");
mainDiv.appendChild(citycode.reduce(function(p,c){
                                      var d = document.createElement("div");
                                      d.classList.add("loop");
                                      c.reduce(function(dv,sp){
                                                 var s = document.createElement("span");
                                                 s.textContent = sp;
                                                 dv.appendChild(s);
                                                 return dv;
                                               },d);
                                      p.appendChild(d);
                                      return p;
                                    },document.createDocumentFragment()));
.loop {color: red}
<div id="main"></div>
1
Redu 8 Дек 2016 в 13:51

Вы можете создать элементы DOM и добавить body.

var citycode = [["In Milan", 0], ["Rom", 5], ["Modena", 6], ["Others", 20]];

citycode.forEach(function (city) {
    var div = document.createElement('div');

    city.forEach(function (a) {
        var span = document.createElement('span');
        span.appendChild(document.createTextNode(a));
        this.appendChild(span);
    }, div);

    this.appendChild(div);
}, document.body);
2
Nina Scholz 8 Дек 2016 в 11:31

Использование функционального программирования, без петель.

var cityCode = [
  ["In Milan", 0],
  ["Rom", 5],
  ["Modena", 6],
  ["Others", 20]
];

const result = cityCode.map(code => 
  `<div class="loop"><span>${code[0]}</span><span>${code[1]}</span></div>`
).join('')

document.body.innerHTML = result;
console.log(result);
2
Lyubomir 8 Дек 2016 в 10:15