如何在Jade中每三次迭代插入一个新的tr

Question

我是node.js和Jade的新手。

我搜索解决方案没有成功（也许我在谷歌上问错了问题，我不知道）。

我想在Jade中的each循环中创建表行。问题是，在每三个td之后，我想要插入新的tr。通常情况下，这很简单，但有了杰德，我根本无法做到这一点。

我的Jade文件：

table
    thead
        tr
            td Header
    tbody
        each item, i in items
            if (i % 3 === 0)
            tr
                td
                    a(href="#{baseUrl}/admin.html?id=#{item.id}")

我知道我的if声明有问题。我尝试了很多配置，但运气不好。我相信这将是一个相当容易的问题。

提前感谢您的帮助！

编辑

根据@Laurent Perrin的回答，我修改了一些代码。现在它创建了tr，然后是3个td，然后是新的tr，所以它离。。。

新玉

if (i % 3 === 0)
   tr
td: a(href="#{baseUrl}/admin.html?id=#{item.id}") dsdsd #{i}

生成的HTML

<tr></tr>
<td><a href="...">0</a></td>
<td><a href="...">1</a></td>
<td><a href="...">2</a></td>
<tr></tr>

Answer 1

EDIT：这段代码应该做你想做的事情，但它不是很优雅：

table
   thead
     tr: td Header
      tbody
        - for(var i = 0, nbRows = items.length/3; i < nbRows; i++) {
        tr
           if items[3*i]
             td: a(href="#{baseUrl}/admin.html?id=#{items[3*i].id}")
           if items[3*i + 1]
             td: a(href="#{baseUrl}/admin.html?id=#{items[3*i + 1].id}")
           if items[3*i + 2]
             td: a(href="#{baseUrl}/admin.html?id=#{items[3*i + 2].id}")
       - }

相反，你可以通过按行分组来调整你的模型，使其更适合Jade：

函数getRows（项）{return items.reduce（函数（prev，item，i）{如果（i%3===0）上一次推送（[项目]）；其他的prev[prev.length-1].push（项）；返回prev；}，[]）；}

这将转向：

[｛id:1｝、｛id:2｝、｝id:3｝、{id:4｝和｛id:5｝]

进入：

[[｛id:1｝，｛id:2｝，{id:3｝]，[｛id:4｝，｛id:5｝]]

然后你的翡翠代码变得简单多了：

桌子theadtr:td标题表格主体每行tr行中的每个项目td:a（href="#｛baseUrl｝/admin.html？id=#｛item.id｝"）

Answer 2

一个jade+bootstrap的例子，每个4个元素（列）一行，行在行内。

```

- var i = 0
- var itens_per_line = 4
each order in viewBag.orders
    - if (i % itens_per_line === 0 || i === 0) {
        .row
    - }
            .col-md-3.column
                p #{order.number}
        - i++

```

Answer 3

以下是我对单个数组（例如['1'，'2'，'3'，'4'）所做的操作，将其转换为每行两个值，可以将其调整为3。

（Mixin是Jade/Pug中的模板）

        mixin mInput
          div.form-group.col-md-6
            p=oval
        - var valcounter = 0
        - var row = [];
        each val in JSON.parse(formvalues)
          if(valcounter % 2 === 0)
            - var col = [];
            - col.push(val)
          else
            - col.push(val)
            - row.push(col)
          - valcounter++
        each orow in row
          div.row
            each oval in orow
              +mInput