代码之家 › 专栏 › 技术社区 › Bobj2008

如何在JS中以不均匀数(大于或小于指定数1)运行的循环内循环;

ejs express loops node.js javascript

0

Bobj2008 · 技术社区 · 7 年前

我正在为一个小剧院集团做一个项目,我正在努力使这个循环正常运行。

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

2 回复 | 直到 7 年前

1

0

Jonas Wilms 7 年前

 <% 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>      
 <% } %>

2

0

jmcgriz 7 年前

如果可能的话,我建议你事先把数组分块。然后,您可以运行一个普通的嵌套循环,将每个组打印到页面上(循环卡片组以创建行,然后在每个迭代循环中循环该组的卡片)

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)