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">

Here is what I am looking for

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

<!-- 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

我建议你尽可能事先将你的数组分块。然后，您可以运行一个普通的嵌套循环来将每个组打印到页面（循环遍历卡组以创建行，然后在每个迭代循环内部通过该组的卡片）

＆＃13;

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)

＆＃13;

如何循环使用JS中的不均匀（1个或多于指定数字）数字运行的循环;

2 个答案: