Question

我目前在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>

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

Answer 1

为嵌套的for循环添加一个额外的缩进，让它在该嵌套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}')

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

使用double for循环在Jade中创建嵌套的div

1 个答案: