Question

我正在导入JSON数据并将每个JSON对象发布到页面，以便它位于自己的div中。有四列JSON对象。直到项目＃24（其中项目以i = 0开头）才可以。然后页面看起来像这样： link to what my page looks like

＃30,36,42＆amp;这些物品停在50点。

这是我的代码：

function displayProducts (productArray) {
var allProducts = document.getElementById('firstPage');
while (allProducts.hasChildNodes()) {
    allProducts.removeChild(allProducts.firstChild);
};
allProducts.setAttribute('class', 'row');
for (var i = 0; i < 50; i++) {
    var newCol = document.createElement('div');
    newCol.setAttribute("name", "newCol");
    newCol.setAttribute('class', 'col-md-3');

    var productImg = document.createElement('img');
    var albumTitle = document.createElement('figcaption');
    var songNumber = document.createElement('p');

    productImg.setAttribute('src', productArray[i].thumbnailUrl);
    albumTitle.innerText = "Album Title: " + productArray[i].title;
    songNumber.innerText = "Track Number: " + productArray[i].id;

    newCol.appendChild(productImg);
    newCol.appendChild(albumTitle);
    newCol.appendChild(songNumber);
    allProducts.appendChild(newCol);

}; };

如何编写代码以便我的对象之间没有间隙？谢谢。

Answer 1

我找到了答案......我使用了php loop counter bootstrap row中的逻辑并在i％4 = 0时添加了一个新的div class = row

导入数据 - ＆gt; Boostrap自动列

1 个答案: