Pug缩进正确却无法生成嵌套HTML结构的问题排查与解决

我编写了以下Pug代码，意图实现每4个.w3-col元素包裹在一个.w3-row-padding容器中：

- var n = 0
each street in streets
    if n % 4 == 0
        - n = 0     
        .w3-row-padding
    if n < 4
            .w3-col.l3.m6.w3-margin-bottom
                .w3-display-container
                    .w3-display-topleft.w3-black.w3-padding 
                        a(href="/ruas/"+street._id) #{street.nome}
                    - var streetName = street._id + "-" + street.nome.replace(/\s/g, "")
                    img(src="/dados/materialBase/atual/"+ streetName +"-Vista1.JPG",alt="House", style="width:100%;height:400px;object-fit: cover;")
    - n = n+1

但生成的HTML为：

<div class="w3-row-padding"></div>
<div class="w3-col l3 m6 w3-margin-bottom"></div>
<div class="w3-col l3 m6 w3-margin-bottom"></div>
<div class="w3-col l3 m6 w3-margin-bottom"></div>
<div class="w3-col l3 m6 w3-margin-bottom"></div>

预期生成的HTML应为：

<div class="w3-row-padding">
    <div class="w3-col l3 m6 w3-margin-bottom"></div>
    <div class="w3-col l3 m6 w3-margin-bottom"></div>
    <div class="w3-col l3 m6 w3-margin-bottom"></div>
    <div class="w3-col l3 m6 w3-margin-bottom"></div>
</div>

请问该Pug写法存在什么问题？如何修改才能生成正确的嵌套HTML结构？

原代码的核心问题是未遵循Pug的缩进嵌套规则：

1. 当n%4==0时创建的.w3-row-padding元素，后续没有缩进的子元素，因此被渲染为空标签；
2. .w3-col元素与.w3-row-padding为同级缩进，最终生成平级HTML，无法形成嵌套；
3. 每次触发n%4==0时重置n=0，导致计数逻辑混乱，无法准确控制每组元素数量。

方案一：先分组再遍历（推荐） #

先将streets数组按每4个元素分割为子数组，再遍历每组生成容器和内部元素：

// 分割数组为每4个元素一组
- let streetGroups = [];
- for (let i = 0; i < streets.length; i += 4) {
-   streetGroups.push(streets.slice(i, i + 4));
- }

// 遍历每组生成嵌套结构
each group in streetGroups
    .w3-row-padding
        each street in group
            .w3-col.l3.m6.w3-margin-bottom
                .w3-display-container
                    .w3-display-topleft.w3-black.w3-padding 
                        a(href="/ruas/"+street._id) #{street.nome}
                    - var streetName = street._id + "-" + street.nome.replace(/\s/g, "")
                    img(src="/dados/materialBase/atual/"+ streetName +"-Vista1.JPG",alt="House", style="width:100%;height:400px;object-fit: cover;")

方案二：调整计数与嵌套逻辑 #

利用Pug的块级语法控制嵌套，避免分组操作：

- var n = 0
each street in streets
    - if (n % 4 === 0) {
        .w3-row-padding
            - for (let i = 0; i < 4 && n < streets.length; i++, n++) {
                - let currentStreet = streets[n]
                .w3-col.l3.m6.w3-margin-bottom
                    .w3-display-container
                        .w3-display-topleft.w3-black.w3-padding 
                            a(href="/ruas/"+currentStreet._id) #{currentStreet.nome}
                        - var streetName = currentStreet._id + "-" + currentStreet.nome.replace(/\s/g, "")
                        img(src="/dados/materialBase/atual/"+ streetName +"-Vista1.JPG",alt="House", style="width:100%;height:400px;object-fit: cover;")
            - }
    - }

两种方案都能将每4个.w3-col元素正确嵌套在.w3-row-padding容器内，完全匹配预期的HTML结构。

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