Jade嵌套循环用法及类属性值递增递减生成问题

你现在的问题出在嵌套循环上：外层循环j从1到11，内层循环i从11到1，这会让每个j都搭配所有的i，最终生成11×11=121个div（你提到的60个可能是描述误差），完全不是你想要的一一对应关系。

要实现你期望的效果，只需要单循环就够了——让offset的值随着col的递增自动递减，比如用12 - j来计算offset（因为j从1到11时，12-j正好从11到1）。

正确的Jade代码 #

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

生成的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>

这个思路的核心是：你需要的是一组配对的数值，而不是所有数值的组合，所以用单个循环计算对应关系就足够了，不需要嵌套循环。

内容的提问来源于stack exchange，提问作者TheLiquidCharcoal