Question

现在我有这个：

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

有没有一种简单的方法可以实现这一目标？

Answer 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

所以在第一个 for循环中，我只需每三次迭代发布一个row，在第二个 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>

Answer 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
        ...

如何在Jade中动态创建行？

2 个答案: