我有一个带有 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>
<% } %>
最佳答案
看起来你只需一个循环就可以逃脱惩罚。为了使行逻辑正确,只需检查循环计数器 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>
<% } %>
<% } %>
关于javascript - Nodejs EJS 中的循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60982994/