在 Nodejs EJS 中运行

Question

我有一个带有 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>

        <% } %>

只是为了表示，我希望卡片以这种方式显示我的数据：

Answer 1

看起来你只需一个循环就可以逃脱惩罚。为了使行逻辑正确，只需检查循环计数器i以查看是否位于索引 0、3、6 等，然后如果是，则可以发出一行。<% for(var i = 0; i < details.length; i++) { %>&nbsp; <% if (i === 0 || i % 3 === 0) { %>&nbsp; &nbsp; <div class="row">&nbsp; <% } %>&nbsp; &nbsp; <div class="col-sm">&nbsp; &nbsp; &nbsp; <div class="card border-danger mb-3" style="max-width: 20rem;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h4 class="card-title"><%= details[i].name %></h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="card-text">Location : <%= details[i].location %><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; City: <%= details[i].city %><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Available: <%= details[i].available %><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Phone No: <%= details[i].phone %>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; <% if (i % 3 === 2 || i === details.length - 1) { %>&nbsp; &nbsp; </div>&nbsp; <% } %><% } %>