我如何在Jade中dynamic创build行？
现在我有这个：
- 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" />
有没有简单的方法来完成这个？
就像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 ，在循环的第二个循环中添加数据，只需添加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>
你可以做到这一点
.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 ...