Javascript 每2项新增一行

我试图从我的数据库中获取数据，并以html格式列出它们

HTML:

JavaScript:

function _getitemlist(arr) {
    var i;
    $("#itemlist").empty();
    for (i = 0; i < arr.length; i++) {
        var t;
        t = "<div id='btnshowitem" + arr[i].itemID + "'><img src='" + serverURL() + "/images/" + arr[i].itemImage + "'width= '200'> <br>" + arr[i].itemName + "<br> Price: $" + arr[i].itemPrice + "</div> <br>";
        $("#itemlist").append(t);
    }
}

function\u getitemlist（arr）{
var i；
$（“#项目列表”）.empty（）；
对于（i=0；i”+arr[i].项目名称+”
价格：$“+arr[i].项目价格+”
”；
$（“#项目列表”）。追加（t）；
}
}

如何使项目以2×2的格式自动列出？ 目前，它看起来是这样的。

如果您没有使用

，为什么要使用

要制作此2by2，只需将其样式设置为2by2，应如下所示：

function _getitemlist(arr) {
 var i;

 $("#itemlist").empty();


for (i = 0; i < arr.length; i++) {
      var t;
    t = "<a href='#' id='btnshowitem" + arr[i].itemID + "'><img src='" + serverURL() + "/images/" + arr[i].itemImage + "'width= '200'> <br>" + arr[i].itemName + "<br> Price: $" + arr[i].itemPrice + "</a><br>";
    $("#itemlist").append(t);
}


}

---

此样式将告诉productlist使用flex对齐，并且他的所有项目元素将没有一半宽度，因此它们只会在第2行出现两个尝试使用

%2

以上的产品创建新行

function _getitemlist(arr) {
  var i;
  $("#itemlist").empty();
  $("#itemlist").append($('<table>').append('<tbody>'));

  for (i = 0; i < arr.length; i++) {
    var t;
    t = "<div id='btnshowitem" + arr[i].itemID + "'><img src='" + serverURL() + "/images/" + arr[i].itemImage + "'width= '200'> <br>" + arr[i].itemName + "<br> Price: $" + arr[i].itemPrice + "</div> <br>";
    var pr = $('#itemlist').find('table').find('tbody');
    if ((i % 2) == 0) {
      pr.append($('<tr>'));
    }
    pr.find('tr:last-child').append(t);
  }
}

.productlist{
  display: flex;
  flex-flow: row wrap;
}

.productlist a{
  display: block;
  width: 50%;
}

function _getitemlist(arr) {
  var i;
  $("#itemlist").empty();
  $("#itemlist").append($('<table>').append('<tbody>'));

  for (i = 0; i < arr.length; i++) {
    var t;
    t = "<div id='btnshowitem" + arr[i].itemID + "'><img src='" + serverURL() + "/images/" + arr[i].itemImage + "'width= '200'> <br>" + arr[i].itemName + "<br> Price: $" + arr[i].itemPrice + "</div> <br>";
    var pr = $('#itemlist').find('table').find('tbody');
    if ((i % 2) == 0) {
      pr.append($('<tr>'));
    }
    pr.find('tr:last-child').append(t);
  }
}