我有一個帶有 bootstrap 的 Nodejs 應用程序。引導卡將連續放置 3 個，列中的數據數量與引導卡的數量相同。我嘗試使用兩個 for 循環，但數據在每一行中重復。我不知道如何實現這一點。我的EJS代碼是<% for(var i=0; i<details.length; i++) { %> <div class="row"> <% for(var j=0; j<3; j++) { %> <div class="col-sm"> <div class="card border-danger mb-3" style="max-width: 20rem;"> <div class="card-body"> <h4 class="card-title"><%= details[i].name %></h4> <p class="card-text">Location : <%= details[i].location %><br> City: <%= details[i].city %><br> Available: <%= details[i].available %><br> Phone No: <%= details[i].phone %></p> </div> </div> </div> <% } %> </div> <% } %>只是為了表示，我希望卡片以這種方式顯示我的數據：
1 回答
阿波羅的戰車
TA貢獻1862條經驗 獲得超6個贊
看起來你只需一個循環就可以逃脫懲罰。為了使行邏輯正確，只需檢查循環計數器i以查看是否位于索引 0、3、6 等，然后如果是，則可以發出一行。
<% for(var i = 0; i < details.length; i++) { %>
<% if (i === 0 || i % 3 === 0) { %>
<div class="row">
<% } %>
<div class="col-sm">
<div class="card border-danger mb-3" style="max-width: 20rem;">
<div class="card-body">
<h4 class="card-title"><%= details[i].name %></h4>
<p class="card-text">Location : <%= details[i].location %><br>
City: <%= details[i].city %><br>
Available: <%= details[i].available %><br>
Phone No: <%= details[i].phone %>
</p>
</div>
</div>
</div>
<% if (i % 3 === 2 || i === details.length - 1) { %>
</div>
<% } %>
<% } %>
- 1 回答
- 0 關注
- 98 瀏覽
添加回答
舉報
0/150
提交
取消