嵌套循环如何与玉一起使用？答案

【问题标题】：How nested loop works with jade?嵌套循环如何与玉一起使用？
【发布时间】：2018-05-29 06:41:20
【问题描述】：

jade 中的嵌套循环是如何工作的？

我正在尝试在类属性中生成多个具有递增和递减值的 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 输出（带有不需要的玉语法）：

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

【问题讨论】：

标签： html pug

【解决方案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);
}

【讨论】：