第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

在 Nodejs EJS 中運(yùn)行

在 Nodejs EJS 中運(yùn)行

桃花長(zhǎng)相依 2023-10-24 21:30:16
我有一個(gè)帶有 bootstrap 的 Nodejs 應(yīng)用程序。引導(dǎo)卡將連續(xù)放置 3 個(gè),列中的數(shù)據(jù)數(shù)量與引導(dǎo)卡的數(shù)量相同。我嘗試使用兩個(gè) for 循環(huán),但數(shù)據(jù)在每一行中重復(fù)。我不知道如何實(shí)現(xiàn)這一點(diǎn)。我的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>        <% } %>只是為了表示,我希望卡片以這種方式顯示我的數(shù)據(jù):
查看完整描述

1 回答

?
阿波羅的戰(zhàn)車

TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超6個(gè)贊

看起來(lái)你只需一個(gè)循環(huán)就可以逃脫懲罰。為了使行邏輯正確,只需檢查循環(huán)計(jì)數(shù)器i以查看是否位于索引 0、3、6 等,然后如果是,則可以發(fā)出一行。


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

  <% } %>

<% } %>


查看完整回答
反對(duì) 回復(fù) 2023-10-24
  • 1 回答
  • 0 關(guān)注
  • 95 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)