html – 在Jade-Template中使用if条件的每个循环

html – 在Jade-Template中使用if条件的每个循环,第1张

概述HEJ. 我正试图在开头和每第9个元素之后写一个tr. 为此,我使用模数运算符,如上例所示. 但是,如果我想在其中使用else条件将td写入同一个tr中,例如它会创建另一个tr. 有人看到了什么问题吗?或者它如何运作? 代码示例 extends layout.jade block body table each result, i in resul HEJ.

我正试图在开头和每第9个元素之后写一个tr.
为此,我使用模数运算符,如上例所示.
但是,如果我想在其中使用else条件将td写入同一个tr中,例如它会创建另一个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输出

解决方法 其中一个解决方案如下:

假设您的快速处理程序中有一个变量结果:

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

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

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

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

我总是喜欢在快速处理程序中执行所有转换,以减少模板内额外的代码行数.

所以你的results2d如下:

[ [ 'a','h' ],[ 'i','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输出如下:

我希望这会有所帮助.

总结

以上是内存溢出为你收集整理的html – 在Jade-Template中使用if条件的每个循环全部内容,希望文章能够帮你解决html – 在Jade-Template中使用if条件的每个循环所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://www.54852.com/web/1055187.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-25
下一篇2022-05-25

发表评论

登录后才能评论

评论列表(0条)

    保存