自举加.row使用循环

Question

我要让2列我知道的结构是这样的

.row 
    .col-md-6 
    .col-md-6 
.row 
    .col-md-6 
    .col-md-6 

，但如何将它使用JavaScript中循环写？

- each obj,index in obj 
     if (index > 0) 
      .row 
       .col-md-6 

Answer 1

这看起来很直截了当。你必须创建一个nested for-loop，它创建x divs，row和y div类col-md-6。

var x = 2, 
    y = 2, 
    colClass = 'col-md-6', 
    rowClass = 'row', 
    rows = [], 
    i, j, currentRow, currentCol; 

// Variable x is the amount of rows to create. 
for (i = 0; i < x; i++) { 

    // Create the row. 
    currentRow = document.createElement('div'); 
    currentRow.classList.add(rowClass); 

    // Variable y is the amount of columns to create for each row. 
    for (j = 0; j < y; j++) { 

     // Create the column. 
     currentCol = document.createElement('div'); 
     currentCol.classList.add(colClass); 

     // Append the column to the row. 
     currentRow.appendChild(currentCol); 
    } 

    // Add the row to an array of rows. 
    rows.push(currentRow); 
} 

// Append the rows to something, or do something else with them. 
// Below practice could already be done inside the for loop, instead of rows.push(currentRow) 
rows.forEach(function (row) { 
    document.body.appendChild(row); 
});