Создание пользовательских сетки CSS в зависимости от массива Длина

Question

У меня есть массив с данными [1,2,3,4,5,6,7], и я хочу показать 2 пунктов на 1 линии

<div class=row> 
    <div>data1</div> 
    <div>data2</div> 
</div> 
<div class=row> 
    <div>data3</div> 
    ... 

Так что я хочу сделать это с JS. Насколько я понимаю, мне нужно что-то вроде [[1,2],[3,4],[5,6],[7]], но не могу понять, как это сделать. Будет здорово, если кто-то сделает это раньше и сможет мне помочь.

Answer 1

Вы можете использовать простой for цикл и приращение на 2 и добавить в HTML

var ar = [1, 2, 3, 4, 5, 6, 7]; 
 
for (var i = 0; i < ar.length; i += 2) { 
 
    document.body.innerHTML += '<div class="row"><div>data' + ar[i] + '</div>' + ((ar[i + 1]) ? '<div>data' + (ar[i + 1]) + '</div>' : '') + '</div>'; 
 
}

div div { 
 
    float: left; 
 
    width: 50%; 
 
}

Answer 2

Можно перебирать и использовать счетчик для группировки.

var array = [1, 2, 3, 4, 5, 6, 7], 
 
    div; 
 

 
array.forEach(function (a, i) { 
 
    var d = document.createElement('div'); 
 
    if (!(i & 1)) { 
 
     div = document.createElement('div'); 
 
     document.body.appendChild(div); 
 
    } 
 
    d.innerText = a; 
 
    div.appendChild(d); 
 
});

div div { float: left; width: 50%; }

Answer 3

Я хотел бы использовать mod, чтобы увидеть, если это даже. Это должно заставить вас начать. Вы также должны проверить неопределенность в индексе перед выводом на экран - я не реализовал это здесь. Если вы используете bootstrap, тогда это не будет работать. Если нет, вам нужно будет написать какой-то css.

$(document).ready(function() { 

    var data = ["1","2","3","4","5","6","7"]; 

    $.each(data, function (index, name) { 
     // if divisible by 2 
     if(index % 2 === 0 ) { 
      // take index and add 1 to it 
      var output = "<div class='row'> <div class='col-md-6'>" + data[index] + "</div> <div class='col-md-6'>" +data[index + 1] + "</div> </div>"; 
      console.log(output); 
     } 

    }); 

}); 

Answer 4

EDIT: убрана JQuery зависимость

https://jsfiddle.net/r4kLddvh/

HTML:

<p id="parent"></p> 

JS:

var data = [1,2,3,4,5,6,7]; 

function makeRow(a,b){ 
    a = !!a ? a : ""; 
    b = !!b ? b : ""; 
    return "<div class='row'><div class='cell'>"+a+"</div>" + "<div class='cell'>"+b+"</div></div>"; 
} 

for(var i=0; i< data.length; i = i + 2){ 
    document.getElementById("parent").innerHTML += (makeRow(data[i], data[i+1])); 
} 

CSS:

.cell{ 
    display:table-cell; 
    height:20px; 
    width:20px; 
    border:1px solid black; 
} 
.row{ 
    display:block; 
}