如何使用jQuery each函数将每3个article元素包裹到div容器中？

你想要把.loop里的article每3个一组，用带newContainer类的div包裹起来对吧？这里有两种简洁的实现方式，看你更习惯哪种：

方法一：使用slice和wrapAll（高效简洁） #

这种方法直接按组截取元素并包裹，代码量少且高效：

// 获取所有目标article元素
const $articles = $('.loop article');
// 以3为步长遍历，每3个元素为一组处理
for (let i = 0; i < $articles.length; i += 3) {
  // 截取当前组的元素，并用指定div包裹
  $articles.slice(i, i + 3).wrapAll('<div class="newContainer"></div>');
}

代码说明： #

• $('.loop article')：获取.loop下所有的article元素集合
• slice(i, i + 3)：从索引i开始，截取最多3个元素（如果最后一组不足3个，会自动取剩下的所有元素）
• wrapAll()：把截取到的一组元素一次性包裹到新的div容器中，比逐个处理更高效

方法二：基于你原来的each循环改造 #

如果你想沿用自己一开始的遍历思路，可以这样调整：

let $currentContainer;
$('.loop').find('article').each(function(index, section) {
  // 每3个元素的第一个（索引0、3、6...）创建新容器
  if (index % 3 === 0) {
    $currentContainer = $('<div class="newContainer"></div>').appendTo('.loop');
  }
  // 将当前article移动到当前容器内
  $(section).appendTo($currentContainer);
});

代码说明： #

• 初始化$currentContainer变量，用来存储当前正在填充的分组容器
• 遍历每个article时，判断索引是否为3的倍数（也就是每组的起始位置），如果是就创建新的newContainer并添加到.loop中
• 把当前遍历到的article移动到这个容器里，遍历完成后就自动完成了分组

⚠️ 注意：你期望的HTML里写的<div="newContainer">是笔误，正确的写法应该是<div class="newContainer">，上面的代码都用了正确的class属性。

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