如何修改Adonis JS Edge模板代码实现每3条后显示1条的交替布局

需求说明 #

现有基于Adonis JS Edge模板的循环代码，当前实现每2条后显示1条的交替布局，需要修改为每3条后显示1条的布局（即3个元素一组，接着1个元素单独一组，循环往复）。

现有代码 #

<div class="column">
    @each( PRO in products )

    <div>{{ PRO.id }}</div>

    @if($loop.index % 3 !== 0 && $loop.index + 1 !== products.length)
</div>
<div class="column">
    @endif
    @endeach
</div>

当前输出 #

<div class="column">
    <div>1</div>
    <div>2</div>
</div>
<div class="column">
    <div>3</div>
</div>
<div class="column">
    <div>4</div>
    <div>5</div>
</div>

期望输出 #

<div class="column">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
<div class="column">
    <div>4</div>
</div>
<div class="column">
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

修改后的代码 #

<div class="column">
    @each( PRO in products )

    <div>{{ PRO.id }}</div>

    @if( (($loop.index + 1) % 4 === 3 || ($loop.index + 1) % 4 === 0) && $loop.index + 1 !== products.length )
</div>
<div class="column">
    @endif
    @endeach
</div>

逻辑说明 #

• 以4个元素为一个周期（3个一组 + 1个单独），通过$loop.index + 1将索引转为从1开始的元素位置
• 当元素位置是周期内的第3个（即%4 ===3）或第4个（即%4 ===0），并且不是最后一个元素时，闭合当前column并新建一个，实现分组效果
• 最后一个元素无需新建column，避免生成多余的空容器

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