嵌套循环如何与jade一起使用？

Question

嵌套循环如何在玉中起作用？

我试图在class属性中生成具有递增和递减值的多个div。 我正在尝试下面的玉语法，并获得60 div的非常奇怪的输出。

玉码：

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

HTML输出（带有大约不需要的jade语法）：

<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输出（所需）：

<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>

Answer 1

根据你的嵌套循环，你得到的是所需的行为。 因为，外部循环在进入下一次迭代之前等待内部循环完成执行。 你需要的只是一个包含2个变量的循环。

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

下面的脚本演示了该循环的工作原理

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