7

我是 node.js 和 Jade 的新手。

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

我想each在 Jade 中循环创建表行。问题是每 3 次之后td我要插入 new 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>
4

3 回答 3

8

编辑：这段代码应该做你想做的，但它不是很优雅：

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(function (prev, item, i) {
        如果（我 % 3 === 0）
            prev.push([项目]);
        别的
            prev[prev.length - 1].push(item);

        返回上一页；
    }, []);
}

这将变成：

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

进入：

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

然后你的玉代码就变得简单多了：

桌子
     头
         tr: td 标头
     身体
        行中的每一行
            tr
                行中的每个项目
                    td: a(href="#{baseUrl}/admin.html?id=#{item.id}")
于 2013-02-06T15:23:21.710 回答
1

一个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++

```

于 2015-03-23T02:18:26.907 回答
1

这是我为单个数组（例如 ['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
于 2016-08-04T17:59:04.077 回答