Jade-Template 中带有 if 条件的每个循环答案

【问题标题】：Each loop with if condition in Jade-TemplateJade-Template 中带有 if 条件的每个循环
【发布时间】：2014-02-04 01:44:20
【问题描述】：

嘿嘿。

我正在尝试在开头和每个第 9 个元素之后写一个 tr。为此，我使用了模运算符，如您在上面的示例中所见。
但是如果我想将 td 之间的 td 写入同一个 tr 和 @例如，987654325@ 条件会创建另一个tr。

有没有人知道哪里出了问题？或者它是如何工作的？

代码示例

extends layout.jade

    block body  
       table  
         each result, i in results
         if (i%9==0)
           tr
             td.ranking
             div.rank
                p=(i+1)+'.'
                div.points
                   p=result.points
                div.person                              
                   p.name=result.name
                   p=result.company  
         else
             td.ranking
             div.rank
                p=(i+1)+'.'
                div.points
                   p=result.points
                div.person                              
                   p.name=result.name
                   p=result.company

HTML 输出

【问题讨论】：

我的理解是否正确：您希望 results 的内容显示为 td 的 9 个 tr？
是的@Tom 没错。
我已经发布了一种可能的解决方案。当我有类似的问题要解决时，我总是执行拆分为二维数组。 Jade 模板对这些操作不是很有帮助（至少对我来说））所以我更喜欢在处理程序中处理参数转换。

标签： html node.js express pug each

【解决方案1】：

其中一个解决方案如下：

假设您的 express 处理程序中有一个变量 results：

var results =  ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r'];

请注意，这可能是一个对象数组。为简单起见，我使用了从 a 到 `r 的字符串。

让我们将该数组拆分为由行和列组成的二维数组：

var results2d = [];
while(results[0]) {
     results2d.push(results.splice(0, 9));
}

我总是喜欢在 express 处理程序中执行所有转换，以减少模板中额外代码行的数量。

所以你的results2d 如下：

[ [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h' ],
  [ 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p' ],
  [ 'q', 'r' ] ]

然后你可以将它传递给 Jade 模板：

res.render('templateId', { results:results2d  });

在模板中，您的代码可能如下：

table  
    - var i = 1;
    each result in results
        tr
            each item in result
                td.ranking
                    div.rank
                        p=(i++)+'.'
                        div.points
                            p=result.points
                        div.person                              
                            p.name=result.name
                            p=result.company

您的 HTML 输出如下：

我希望这会有所帮助。

【讨论】：