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) {});
});

Answer 2

您可以在类col-md-4的div内的div中添加类row

$(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 colo-md-4" 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 3

forEach中的呈现逻辑需要更改。重复这些列，然后将所有列放入row

     data.forEach(function(a) { 
        html += `      
           <div class="col-4">
            <div class="card" style="width:20em;text-align:center;display:inline-block;">
                <img class="imagee" src="//placehold.it/200" alt="image" height="200" width="200" style="border-radius:.60rem;">
                 <div class="card-body">
                 `+a[0]+`<br>
                 <i class="fa fa-car"></i>
                  <p class="card-text"></p>
                </div>
              </div>
        </div>`;
     });
     $('#msgs').append(`<div class="row">`+html+`</div>`);

演示：https://www.codeply.com/go/Xh54qLX5xp

Answer 4

谢谢大家指导我找到解决方案。这是我发现的一种解决方案，可以使用col-lg-3将卡水平对齐以进行循环。

     var html = ` 
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

            <div class="col-lg-3" ng-app=""><br>
            <div  class="card" style="width:20em;text-align:center;"><br>
              <img ng-if="'${a[2]}'=='null'" src="image" height="200" width="200" style="border-radius:.60rem;">

               <div class="card-body">
                &nbsp;${a[0]} &nbsp;| &nbsp;${a[4]}<br>

                 &nbsp;${a[7]}<br></td>
                 <tr><td>
                 &nbsp;<i class="fa fa-bed"></i>&nbsp; ${a[1]} &nbsp;

</div>
  </div><br>
</div>`

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

          });

动态地将三张卡片在一行中水平对齐

4 个答案: