如何在JS中以不均匀（大于或小于指定数字1）的数字运行的循环中循环；

Question

我正在为一个小型剧院小组进行项目，并且正在尝试使此循环正确运行。

<% include ../partials/header %>
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Meet our Board of Directors!</h1>
  </div>
</div>
<% let cards = 5;
let totalCard = 0;
for(i = 0; i < cards; i++) {
if (i % 3 === 0) { %>
  <div class="card-group text-center">

  <% for(let numCards = 0;  numCards < 3 || totalCard === cards; numCards++) { %>
    <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <% totalCard++} %>

  </div>
<% numCards = 0; } } %>


<% include ../partials/footer %>

好吧，第一个循环运行得很好！

for(i = 0; i < cards; i++) {
if (i % 3 === 0) { %>
  <div class="card-group text-center">
<% } } %>

但是内循环是让我兴奋的原因

<% for(let numCards = 0;  numCards < 3 || totalCard === cards; numCards++) { %>
<div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
</div>
<% totalCard++} %>

从本质上讲，我希望它在内部创建至少三张卡片

<div class="card-group text-center">

这是我要找的

这是我正在寻找的硬编码结果

<!-- First Div Generated -->
<div class="card-group text-center">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

<!-- Second Div Generated -->
<div class="card-group text-center">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>
</div>

Answer 1

 <% let cards = 5, perRow = 3; %>
 <% for(let row = 0; row < cards/perRow + 1; row++){ %>
    <div id= "outer">
      <% for(let i = 0; i < 3 && i + row * perRow < cards; i++){ %>
        <div id = "inner" ></div>
     <% } %>   
    </div>      
 <% } %>

Answer 2

我建议您在可能的情况下事先对数组进行分块。 然后，您可以运行一个普通的嵌套循环将每个组打印到页面上（遍历卡片组以创建行，然后在每个迭代循环中遍历该组的卡片）

 var cards = ["one", "two", "three", "four", "five"] var cardgroups = [] while(cards.length > 0){ let chunksize = cards.length < 3 ? cards.length : 3 //as long as more than 3 exist, grab the next group of 3 cardgroups.push(cards.splice(0, chunksize)) //push the next chunk into the array } console.log(cardgroups)