Question

我有数据[1,2,3,4,5,6,7]的数组，我想在1行显示2个项目

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

所以我想用JS做。据我所知，我需要像[[1,2],[3,4],[5,6],[7]]那样的smth，但不能理解如何制作它。如果以前有人这样做会很有帮助，那就太好了。

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

您可以迭代并使用计数器进行分组。

＆＃13;

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);
});

＆＃13;

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

＆＃13;

Answer 3

我会使用mod查看它是否均匀。这应该让你开始。您还应该在输出到屏幕之前检查索引中的undefined - 我没有在此处实现。如果你使用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

编辑：删除了JQuery依赖

https://jsfiddle.net/r4kLddvh/

HTML：

JS：

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

CSS：

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]));
}

Answer 5

使用JS和CSS网格。

HTML：

    <div id=grid-wrapper">
      <div class="grid-item></div>
      <div class="grid-item></div>
      <div class="grid-item></div>
      <div class="grid-item></div>
    </div>

CSS：

    #grid-wrapper {
       display: grid;
    }

JavaScript：

    let dataArray = dataFromDB; // assuming data from API
    let numColumns = 4; // set number of columns    
    let grid = document.getElementById('grid-wrapper');
    // sets number of rows dynamically 
    grid.style.gridTemplateRows = `repeat(${Math.ciel(dataArray.length / numColumns)}, 1fr)`;
    grid.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;

根据数组长度创建自定义网格css

5 个答案: