如何实现每3个.product元素包裹，每第4个元素跳过包裹？

原始HTML结构：

<div class="products">
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
</div>

需要实现的结构：每3个.product用.wrap容器包裹，第4个.product单独保留，最终结构如下：

<div class="products">
    <div class="wrap">
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
    </div>
    <div class="product"></div>
    <div class="wrap">
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
    </div>
    <div class="product"></div>
</div>

用户尝试的代码（仅能实现每3个元素包裹，无法跳过第4个）：

var divs = $(".products .product");
for (var i = 0; i < divs.length; i +=3) { divs.slice(i, i + 3).wrapAll("<div class='wrap'>
    </div>");
}

调整循环步长为4，每次处理前3个元素并包裹，自动跳过第4个元素，代码如下：

var divs = $(".products .product");
for (var i = 0; i < divs.length; i += 4) {
    // 包裹当前起始位置的3个.product元素（元素不足3个时会包裹剩余的所有）
    divs.slice(i, i + 3).wrapAll("<div class='wrap'></div>");
}

逻辑说明 #

• 循环步长改为4，对应「3个包裹元素 + 1个单独元素」的组合逻辑
• 每次循环用slice(i, i+3)选取目标元素，通过wrapAll完成包裹
• 循环变量i每次增加4，自然跳过第4个元素，进入下一组处理

如果元素总数不是4的倍数，比如最后剩余1-3个元素，代码会自动包裹剩余的所有元素，不会出现异常。

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