Почему это html-приложение структурировано иначе, чем структура массива

#javascript #html #jquery #arrays #for-loop

Вопрос:

У меня есть два цикла for, которые строят мою html-структуру.

Внешний цикл строит каждую строку '<div class="row">' до того, как код перейдет во вложенный цикл for, который строит каждый столбец в строке '<div class="col-sm-1">' data[k].value '</div>' до того, как строка-div будет закрыта во внешнем цикле.

 var i;
var n;
var k = 0;

for (i = 0; i < createRows; i  ) {
    htmlArray.push('<div class="row">')
    console.log("creating row")
    for (n = 0; n < variableAmount; n  ) {
        htmlArray.push('<div class="col-sm-1">'   data[k].value   '</div>')
        k  
    }
    htmlArray.push('</div>')
    console.log("ending row")
}
console.log(htmlArray)
$("#wrapper").append(htmlArray);

Отображается console.log(htmlArray) ожидаемый вывод и структура, row содержащая все col-sm-1 div, перед созданием нового row div, но когда массив добавляется #wrapper , я получаю структуру, аналогичную этой:

 <div class="row"></div>
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>

Где row div закрыт, не содержит никакого столбца div.

Нужна структура из консоли.журнал htmlArray:

1. В чем проблема?

2. Добавление не добавляет ту же структуру, что и в массиве. Он закрывает разделитель строк перед разделителями столбцов. Что я здесь упускаю?

3. HTML-элементы добавляются как единицы, вы не можете добавлять открывающие и закрывающие теги отдельно. Добавьте htmlArray.join('') вместо массива.

4. @Teemu, Но они помещаются в массив вместе, перед добавлением. Они не добавляются отдельно(?). Разыскиваемая структура-консоль. журнал htmlArray.

5. jQuery выполнит итерацию по массиву и добавит каждый элемент по отдельности.

Ответ №1:

Возможно, проблема в том, что вы добавляете массив. Вы можете использовать Array.join для создания окончательной HTML-структуры.

 const finalHTML = htmlArray.join('');
$("#wrapper").append(finalHTML);