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

Question

我是node.js和Jade的新手。

我搜索的解决方案没有成功（也许我在谷歌中提出错误的问题，我不知道）。

我想在Jade的each循环中创建表行。问题是每隔3 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，这样它就会更近一点......

New Jade

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

编辑：这段代码可以做你想要的，但不是很优雅：

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：

function getRows(items) {
    return items.reduce(function (prev, item, i) {
        if(i % 3 === 0)
            prev.push([item]);
        else
            prev[prev.length - 1].push(item);

        return prev;
    }, []);
}

这将转为：

[{id:1},{id:2},{id:3},{id:4},{id:5}]

成：

[
    [{id:1},{id:2},{id:3}],
    [{id:4},{id:5}]
]

然后你的玉码变得更简单了：

table
     thead
         tr: td Header
     tbody
        each row in rows
            tr
                each item in row
                    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

以下是我为单个阵列所做的事情（例如[＆＃39; 1＆＃39;，＆＃39; 2＆＃39;，＆＃39; 3＆＃39;，＆＃39; 4＆＃39; ]）将其转换为每行两个值，可以调整为3。

（mixins是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