嵌套循环如何与玉一起工作？

Question

嵌套循环在玉器中是如何工作的？

我试图用类属性中的递增和递减值来生成多个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>

Answer 1

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

.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);
}

​