每3项然后每1项交替显示

Question

我当前的代码是这样的，它在循环内交替显示每 2 项和每 1 项。我希望它显示每 3 个项目，然后每 1 个项目。

我使用 Adonis JS 模板引擎（Edge）

<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>

Answer 1

为了获得

3-1-3-1...

模式，我会推理如下：

1. 检查当前索引（从 0 开始）加 1（以使其从 1 开始并且更容易推理）是否可以被 4 整除或者是否比 4 的倍数小 1。
2. 此外，验证当前索引是否不是

   products

   数组的最后一个索引，这将防止按照我的上述逻辑在末尾创建额外的空列

   <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>

我创建了一个小片段来测试上述逻辑，您可以参考。

const products = Array.from({ length: 7 }, (_, index) => ({ id: index + 1 }));

const columns = [];
let column = [];

products.forEach((product, index) => {
  column.push(product.id);
  const newIndex = index + 1;

  if (newIndex % 4 === 3 || newIndex % 4 === 0) {
    columns.push(column);
    column = [];
  }
});

if (column.length > 0) {
  columns.push(column);
}

console.log(columns);