jQuery实现每5个数组元素新建.wrapperItems容器追加子项

核心规则：每5个.itemCon元素包裹在一个.wrapperItems容器内，数组长度任意都可自动适配，不需要手动提前创建容器节点。

实现逻辑 #

• 渲染前先清空外层.wrapper容器的旧内容，避免重复渲染残留
• 按每5个元素为一组对原数组做切片拆分，每组对应一个独立的.wrapperItems容器
• 每遍历到一组元素，先创建新的.wrapperItems节点，再把组内所有元素生成.itemCon节点追加到该容器
• 把组装完成的组容器统一追加到外层.wrapper中即可

完整代码 #

JS逻辑（替换原有错误遍历逻辑即可） #

let myArray = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test7', 'test8', 'test9']
// 每个wrapperItems容器容纳的元素数量，修改这个值即可调整每组个数
const PER_GROUP_NUM = 5
const $outerWrapper = $('.wrapper')

// 清空旧内容
$outerWrapper.empty()

for (let i = 0; i < myArray.length; i += PER_GROUP_NUM) {
  // 截取出当前组要渲染的元素
  const currentGroup = myArray.slice(i, i + PER_GROUP_NUM)
  // 创建当前组的容器
  const $groupWrapper = $('<div class="wrapperItems"></div>')
  // 往组容器内追加元素
  currentGroup.forEach(item => {
    $groupWrapper.append(`<div class="itemCon"><p>${item}</p></div>`)
  })
  // 把组容器放到外层wrapper里
  $outerWrapper.append($groupWrapper)
}

配套CSS样式 #

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  background-color: gold;
}

.wrapperItems {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: fit-content;
  background-color: coral;
}

.itemCon {
  display: flex;
  width: 15%;
  height: 7vh;
  background-color: pink;
}

.itemCon p {
  margin: auto;
}

基础HTML结构 #

<!-- 提前引入jQuery即可 -->
<div class="wrapper"></div>

效果说明 #

以上代码运行后会自动生成符合要求的DOM结构：比如示例中长度为9的数组，会自动生成2个.wrapperItems容器，第一个容器放前5个元素，第二个容器放剩余4个元素，数组长度为0、12、100等任意值时都可以正常适配，不会出现单个容器内元素超过设定个数的问题。

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