在 Jade 中使用双 for 循环创建嵌套 div答案

【问题标题】：Using a double for loop to create nested divs in Jade在 Jade 中使用双 for 循环创建嵌套 div
【发布时间】：2015-07-01 02:11:27
【问题描述】：

我目前在 Jade 中有这段代码，它可以生成一个单元格表。我的目标是拥有 n 行 div，每行包含 m 个 div，它们水平对齐且等距。

    div#grid
        - for (var row = 1; row <= height; row++) {
            div(class='row_#{row}')
            - for (var col = 1; col <= width; col++) {
                div(class='square seat#{row}_#{col}') 
            - }
        - }

我希望我的结果是这样的

<div id="grid">
   <div class="row_1">
        <div class="square seat1_1"> </div>
        <div class="square seat1_2"> </div>
        <div class="square seat1_3"> </div>
   </div>
   <div class="row_2"></div>
       <div class="square seat2_1"> </div>
       <div class="square seat2_2"> </div>
       <div class="square seat2_3"> </div>
   </div>
   .
   .
   .
</div>

结果是这样的

<div id="grid">
     <div class="row_1"></div>
     <div class="square seat1_1"> </div>
     <div class="square seat1_2"> </div>
     <div class="square seat1_3"> </div>
     <div class="row_2"></div>
     <div class="square seat2_1"> 
     </div><div class="square seat2_2"> </div>
     <div class="square seat2_3"> </div>
     .
     .
     .
 </div>

我很确定这会因为缩进而起作用，但事实并非如此。有人对如何解决此问题以产生我想要的结果有任何建议吗？

【问题讨论】：

标签： html loops for-loop nested pug

【解决方案1】：

给你的嵌套 for 循环一个额外的缩进，让它在嵌套 div 的 inside 中呈现

#grid
    - for (var row = 1; row <= height; row++)
        div(class='row_#{row}')
            - for (var col = 1; col <= width; col++)
                div(class='square seat#{row}_#{col}')

Ps：你不一定需要带有缩进的花括号

【讨论】：