Question

我使用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>");
        }
    }
});

现在所有卡片都被推送到我的全局阵列。我正在使用bootstrap列出所有卡片。但是我想在每张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做到这一点？

帮助我们获得赞赏!!

Answer 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

切片阵列使用javascript创建卡片

1 个答案: