如何使用forEach每3个元素为一组创建行结构？

解决方案 #

你可以通过判断元素索引，在每3个元素的起始位置创建新行容器，再将元素添加到当前行中，修改后的完整代码如下：

this.el = document.getElementById('feed')

const releases = data.Releases //array of items
const list = document.createDocumentFragment()
let currentRow = null // 跟踪当前的行容器

releases.forEach((release, index) => {
  // 每3个元素创建一个新行（索引从0开始，index%3===0时触发）
  if (index % 3 === 0) {
    currentRow = document.createElement('div')
    list.appendChild(currentRow)
  }

  let item = document.createElement('div')

  let a = document.createElement('a')
  let title = document.createElement('h2')
  let date = document.createElement('time')

  title.innerHTML = `${release.Title}`
  date.innerHTML = `${release.PublishDate}`
  a.setAttribute('href', release.EncryptedId)
  
  a.appendChild(date)
  a.appendChild(title)
  item.appendChild(a)
  // 将元素添加到当前行，而非直接加入fragment
  currentRow.appendChild(item)
})

this.el.appendChild(list)

关键逻辑说明 #

• 用currentRow变量存储当前活跃的行容器，初始值设为null
• 循环中通过index % 3 === 0判断是否需要新建行：当索引为0、3、6...时，创建新的行div并添加到fragment中
• 每个生成的item元素都追加到currentRow里，而非直接加到fragment
• 即使数组长度不是3的倍数，剩余的1或2个元素也会自动被包裹在最后一行中，满足布局需求

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