切片数组以使用 javascript 创建卡片答案

【问题标题】：slice arrays to create cards using javascript切片数组以使用 javascript 创建卡片
【发布时间】：2018-04-14 15:52:38
【问题描述】：

我正在使用 bootstrap 使用以下示例链接创建卡片： https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_temp_portfolio&stacked=h

我正在使用 ajax 将卡片数据推送到全局数组中。

htmlCards = [];

$.ajax({
    async: true,
    url: 'xxx.com',
    type: 'GET',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(data) {

        for(var i=0; i<data.length; i++) {
            htmlCards.push("<div class='col-sm-3'><img class='movie-selection' src="+eval(data[i].title.replace(/\s+/g, '').replace(':', '').toLowerCase())+" class='img-responsive' style='width:100%'><p class='movie-selection' >"+data[i].title+"</p></div>");
        }
    }
});

现在所有卡片都被推送到我的全局数组中。我正在使用引导程序列出所有卡片。但是，我想在每 3 张卡片列表中换行。如下所示：

<div id="listing-main">
    <div class="row">
        <div class="col-sm-3">
            <p>Some text..</p>
            <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
        </div>
        <div class="col-sm-3">
            <p>Some text..</p>
            <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
        </div>
        <div class="col-sm-3">
            <p>Some text..</p>
            <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <p>Some text..</p>
            <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
        </div>
        <div class="col-sm-3">
            <p>Some text..</p>
            <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
        </div>
        <div class="col-sm-3">
            <p>Some text..</p>
            <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
        </div>
    </div>
</div>

如何使用 ajax 做到这一点？

我们将不胜感激！

【问题讨论】：

你将如何创建 dom？通过循环 htmlCards
@brk 是的......
Don't need to scream for help 加粗文本...

标签： javascript html css ajax twitter-bootstrap

【解决方案1】：

可能是您正在寻找的东西

var htmlCards = [
  '<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">',
  '<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">',
  '<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">',
  '<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">'
]
    for (var i = 0; i < htmlCards.length; i++) {
       var appendDiv = $(htmlCards[i]);
       if (i % 3 === 0) {
         appendDiv = $('<div class="row row' + (i /3) + '">').append(appendDiv);
         $('#listing-main').append(appendDiv);
       } else {
         console.log(Math.floor(i/3));
         $('#listing-main').find('.row' + Math.floor(i/3)).append(appendDiv);
       }

    }

见codepen

【讨论】：