如何在 Jade 中动态创建行？答案

【问题标题】：How can I dynamically create rows in Jade?如何在 Jade 中动态创建行？
【发布时间】：2016-10-16 23:02:39
【问题描述】：

现在我有这个：

- count = 0
- each organization in organizations
    if (count == 0 || count % 3 == 0)
        .row
    .col-md-4
        a(href="#{organization.url}" target="_blank")
            .fancyy-box
                h3= organization.name
                img(src="/images/organizations/#{organization.logo}")
                p= organization.mission
- count = count + 1

我想做的是每隔三个组织开始一个新行，这样我得到：

<div class="row">
    <div class="organization">...</div>
    <div class="organization">...</div>
    <div class="organization">...</div>
</div>
<div class="row">
    <div class="organization">...</div>
    <div class="organization">...</div>
    <div class="organization">...</div>
</div>
// and so on...

现在我开始了：

<div class="row" />
<div class="organization">...</div>
<div class="organization">...</div>
<div class="organization">...</div>
<div class="row" />
<div class="organization">...</div>
<div class="organization">...</div>
<div class="organization">...</div>
<div class="row" />

有没有简单的方法可以做到这一点？

【问题讨论】：

翡翠以缩进方式工作。在 .row 一个选项卡之后移动所有内容。
@MukeshSoni 将在 row 的 if 语句中包含 organization 输出。不过，这确实得到了回答，ztirom 提供的解决方案正是我想要的。

标签： node.js pug

【解决方案1】：

就像Mukesh Soni 说你需要考虑你的缩进。但这只是您问题的一部分，我认识到的第二件事是您的条件语句和循环。我对它进行了一些编辑，如下所示：

- for (var j = 0; j < organizations.length; j++)
  if (j == 0 || j % 3 == 0)
    .row
      - for (var i = j; i < (3 + j); i++ )
        - if (i >= organizations.length) break;
          .col-md-4
            a(href="#{organizations[i].url}" target="_blank")
              .fancyy-box
                h3= organizations[i].name
                img(src="/images/organizations/#{organizations[i].logo}")
                p= organizations[i].mission

所以在 first for 循环中，我只需每三次迭代发布一个 row，在 second for 循环中添加您的数据，只需添加 3 行 / div。如果i 变得更大，那么您的数据 - 它会中断。

这里是一个例子：首先是我的数据

{
  organizations: [
    {name: 'demo1', url: 'example.com', logo: 'pic1.jpg', mission: '1'}, 
    {name: 'demo2', url: 'anotherexample.com', logo: 'pic2.jpg', mission: '2'},
    {name: 'demo3', url: 'justanotherexample.com', logo: 'pic3.jpg', mission: '3'},
    {name: 'demo4', url: 'wowjustanotherexample.com', logo: 'pic4.jpg', mission: '4'}]
}

现在是 HTML 输出：

<div class="row">
  <div class="col-md-4">
    <a href="example.com" target="_blank">
      <div class="fancyy-box">
        <h3>demo1</h3><img src="/images/organizations/pic1.jpg"/>
        <p>1</p>
      </div>
    </a>
  </div>
  <div class="col-md-4">
    <a href="anotherexample.com" target="_blank">
      <div class="fancyy-box">
        <h3>demo2</h3><img src="/images/organizations/pic2.jpg"/>
        <p>2</p>
      </div>
    </a>
  </div>
  <div class="col-md-4">
    <a href="justanotherexample.com" target="_blank">
      <div class="fancyy-box">
        <h3>demo3</h3><img src="/images/organizations/pic3.jpg"/>
        <p>3</p>
      </div>
    </a>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    <a href="wowjustanotherexample.com" target="_blank">
      <div class="fancyy-box">
        <h3>demo4</h3><img src="/images/organizations/pic4.jpg"/>
        <p>4</p>
      </div>
    </a>
  </div>
</div>

【讨论】：

编辑我的答案需要更长的时间，第一次编辑不是问题作者搜索的内容。很抱歉，修复该问题需要一秒钟以上的时间。
我还没有真正尝试过这个，但是看了之后，它看起来应该像冠军一样工作。非常感谢！
这个答案不是最优雅的 IMO - 它使用了一些复杂的 for 循环，并且答案中的实际 json 数据是无效的 json。这里的迭代有点笨拙。我在这里的答案解决了同样的问题：stackoverflow.com/questions/13114489/…

【解决方案2】：

你可以这样做

 .row 
   each organization, i in organizations
     if i > 0 && i % 3 === 0
       // jade/pug can interpret html
       </div><div class="row">
       // past you col template here
       .col-md-4
        a(href="#{organizations[i].url}" target="_blank")
          .fancyy-box
        ...

【讨论】：