How to insert a new tr every third iteration in Jade

Question

I am new to node.js and Jade.

I searched for solutions without success (maybe I asked the wrong questions on google, I don't know).

I want to create table rows in each loop in Jade. The thing is, after every third td I want to insert a new tr . This is usually pretty simple, but with Jade, I just can't get it.

My Jade File:

 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}") 

I know something is wrong with my if . I tried many configurations with no luck. I am sure this will be a fairly simple question.

Thanks in advance for your help!

EDIT

Based on @ Laurent Perrin's answer, I changed my code a bit. Now it creates tr , then 3 td , and then a new tr , so it's a little closer ...

New jade

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

HTML generated

 <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 : this code should do what you want, but it is not very elegant:

 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}") - } 

Instead, you can customize your model to make it more Jade friendly by grouping items by row:

  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;
     }, []);
 }

It will look like this:

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

in

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

Then your jade code will become much simpler:

  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

Example jade + bootstrap, each 4 elements (columns) one line, and the lines go inside the line.

`` ``

 - 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

Here is what I did for a single array (for example, ['1', '2', '3', '4']) to convert it to two values ​​in a string, it could be adjusted to 3.

(mixins are templates in 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