Javascript 每隔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>

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

.as-console-wrapper { max-height: 100% !important; top: 0; }

Javascript相关问答推荐

通过使用100%间隔时间来代表我们还剩多少时间来倒计时

按钮未放置在html dis位置

JQuery. show()工作，但. hide()不工作

如何在angular中从JSON值添加动态路由保护？

如何修复我的js构建表每当我添加一个额外的列作为它的第一列？

为什么当我解析一个promise时，输出处于挂起状态？

可更改语言的搜索栏

React.Development.js和未捕获的ReferenceError：未定义useState

当输入字段无效时，我的应用程序不会返回错误

在使用REACT更改了CSS类之后，无法更改CSS样式

如何 for each 输入动态设置输入变更值

如何在我的Next.js项目中.blob()我的图像文件？

在Vercel中部署Next.js项目时获取`ReferenceError：未定义文档`

用另一个带有类名的div包装元素

每隔3个项目交替显示，然后每1个项目交替显示

如何在每隔2分钟刷新OKTA令牌后停止页面刷新

浮动标签效果移除时，所需的也被移除

如何从嵌套的json中获取最大值

带有JS模块模式的Rails的Importmap错误："；Net：：ERR_ABORTED 404(未找到)&Quot；

在采购unpept-visalizations.js时遇到问题