jquery - 动态地将三张卡片水平对齐一行

Question

我正在尝试将卡片一张一张对齐。我已经完成了下面的编码，不确定为什么我不能一个接一个地显示它。

我在这里尝试调用 REST API，我从 REST API 获得的结果是一个列表，我需要通过 for 循环迭代结果，然后以卡片形式显示获取的数据。请有人指导我解决这个问题，谢谢..

client.js

 $(document).ready(function() {   
        $.ajax({
           url: "REST API CALL",
           success: function(data){        
            data.forEach(function(a) { 
                var html = `      
                <div class="row">
                   <div class="">
                    <div class="card" style="width: 20rem; text-align:center;display:inline-block;">
                    <img class="imagee" src="im.png" alt="image" height="200" width="200" style="border-radius:.60rem;">
                     <div class="card-body">
                     ${a[0]}|${a[4]}<br>
                     ${a[7]}<br>
                     <i class="fa fa-car"></i>${a[9]}
                  <p class="card-text"></p>
           </div>
    </div>
      </div>
    </div>`

                $('#msgs').append(`<div>${html}</div>`);
              });
             }
        }).then(function(data) {      
        });
        });

Answer 1

更改下面的代码，并将 <div class="row">在此函数之外和具有 id="msgs" 的 html 元素周围, 自 div class row需要围绕所有卡片元素。

$(document).ready(function() {
  $.ajax({
    url: "REST API CALL",
    success: function(data) {
      data.forEach(function(a) {
        var html = `      
                <div class="card col-4" style="text-align:center;">
                    <img class="imagee" src="im.png" alt="image" height="200" width="200" style="border-radius:.60rem;">
                    <div class="card-body">
                        ${a[0]}|${a[4]}<br>
                        ${a[7]}<br>
                        <i class="fa fa-car"></i>${a[9]}
                        <p class="card-text"></p>
                    </div>
                </div>`;
        $("#msgs").append(`<div>${html}</div>`);
      });
    }
  }).then(function(data) {});
});