如何为for循环的每次迭代维护标记缩进级别？

Question

我按FamilyId排序的数据库查询中的数据如下：

|FamilyId| Name   |
|    1   |   x    |
|    1   |   y    |
|    2   |   a    |
|    2   |   b    |
|    2   |   c    |

我想实现：

<div>
  <img src='1.jpg' />
</div>
<div>
  <p>x</p>
  <p>y</p>
</div>

<div>
  <img src='2.jpg' />
</div>
<div>
  <p>a</p>
  <p>b</p>
  <p>c</p>
</div>

我使用了以下数据，其中数据位于data：

- var fid = null
for row in data
  -var newFamily = fid!==row.FamilyId
  if newFamily
     - fid = row.FamilyId
     div
       img(src='#{row.FamilyId}.jpg')
     div
       p #{row.Name} 
  else
       p #{row.Name} 

除了Jade脚本中最后一行生成的行外，输出正常。即使缩进级别正确，它也不是第二个div的子级。看起来for循环的每次迭代都会将缩进级别重置为for块的开头。输出如下：

<div>
  <img src='1.jpg' />
</div>
<div>
  <p>x</p>
</div>
<p>y</p>

有没有办法解决它？

Answer 1

尝试循环数据两次：

for row in data
   -var newFamily = fid!==row.FamilyId
   if newFamily
      - fid = row.FamilyId
      div
         img(src='#{row.FamilyId}.jpg')
      for row2 in data
          if fid == row2.FamilyId
             div
                p #{row2.Name}