如何将服务器生成的动态图片div按每组4个拆分到不同thumbSlides容器

实现方案 #

你原来的分组创建逻辑存在两个小问题：一是分组数量计算没有向上取整，会导致不足4个的剩余元素没有对应分组；二是原有的包含所有子元素的thumbSlides容器会残留冗余内容。你可以直接使用下面整合后的完整逻辑实现需求，也可以按照你已有的创建流程单独调用元素移动逻辑：

完整实现逻辑（推荐）

直接完成分组创建+元素移动，逻辑更统一，避免冗余结构：

// 1. 获取所有缩略图子元素
const $thumbItems = $('#thumbImageList .col-3.col-md-3');
// 2. 计算需要的分组总数，向上取整保证剩余不足4个的元素也能独立成组
const groupTotal = Math.ceil($thumbItems.length / 4);
// 3. 清空外层容器原有内容，删掉旧的冗余thumbSlides
$('#thumbImageList').empty();

// 4. 循环生成每组
for (let i = 0; i < groupTotal; i++) {
  // 创建当前组的父容器
  const $currentGroup = $('<div class="thumbSlides"></div>');
  // 截取当前组对应的4个元素，slice自动适配最后一组不足4个的场景
  const $currentItems = $thumbItems.slice(i * 4, i * 4 + 4);
  // 把元素插入当前组容器
  $currentGroup.append($currentItems);
  // 把组容器插入外层列表
  $('#thumbImageList').append($currentGroup);
}

适配你现有流程的元素移动逻辑

如果你已经完成了thumbSlides的创建，只需要移动元素，可以用以下代码：

// 1. 获取所有子元素和已创建的thumbSlides容器
const $thumbItems = $('#thumbImageList .col-3.col-md-3');
const $allSlides = $('#thumbImageList .thumbSlides');

// 2. 给每个thumbSlides分配对应位置的子元素
$allSlides.each(function (index) {
  const $groupItems = $thumbItems.slice(index * 4, index * 4 + 4);
  $(this).append($groupItems);
});

// 3. 删除最开始存储所有子元素的旧空thumbSlides容器
$allSlides.eq(0).remove();

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