How nested loop works with jade?

How nested loop works in jade?

I am trying to generate multiple div with increasing and decreasing value in class attribute. I am trying below jade syntax for that and getting very weird output of 60 div.

jade code:

.row
  - for (var j = 1; j < 12; j++)
    - for (var i = 11; i >= 1; i--)
      div(class="col-"+j+" col-offset-"+i)= val

HTML output(with about jade syntax which is unwanted):

<div class="col-1 col-offset-11"></div>
<div class="col-1 col-offset-10"></div>
<div class="col-1 col-offset-9"></div>
.
.
.
<div class="col-11 col-offset-3"></div>
<div class="col-11 col-offset-2"></div>
<div class="col-11 col-offset-1"></div>

HTML output(Desired):

<div class="col-1 col-offset-11"></div>
<div class="col-2 col-offset-10"></div>
<div class="col-3 col-offset-9"></div>
<div class="col-4 col-offset-8"></div>
<div class="col-5 col-offset-7"></div>
<div class="col-6 col-offset-6"></div>
<div class="col-7 col-offset-5"></div>
<div class="col-8 col-offset-4"></div>
<div class="col-9 col-offset-3"></div>
<div class="col-10 col-offset-2"></div>
<div class="col-11 col-offset-1"></div>

Solution

According to your nested loops, what you get is the desired behaviour. Because, outer loop waits until the inner loop completes execution before go to the next iteration. What you need is only one loop with 2 variables.

.row
   - for (var j = 1, i = 11; j < 12; j++, i--)
     div(class="col-"+j+" col-offset-"+i)= val

Below script demonstrates how that loop works.

for(var j = 1, i = 11; j < 12; j++, i--) {
  console.log("col-" + j+ " col-offset-" + i);
}