javascript - 如何用 jquery 包装元素，但只包装一次

Question

var carouselitems = $("#bestselling .carousel-inner .product");
for(var i = 0; i < carouselitems.length; i+=count) {
  carouselitems.slice(i, i+count).wrapAll("<div class='item'></div>");
}
$('#bestselling .carousel-inner .item').first().addClass('active');

我需要脚本的这一部分将每个 count 元素包装在 .item div 中，但是因为我正在为我的网站使用断点(响应式) ，我必须根据断点重置 count 数字，例如:setCarouselSlides(3);。

如果我这样做，每次我的 div 被包裹时，它们都会被包裹在 +1 层 .item div 中，所以如果一开始它是

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

然后在断点之后是

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

当我启动 setCarouselSlides(); 函数时，如何强制它添加 .item 包装一次？

Answer 1

你可以调用一个unwrap

function setCarouselSlides(count){
    $("#bestselling .carousel-inner .item .product").unwrap()
    var carouselitems = $("#bestselling .carousel-inner .product").unwrap();
    for (var i = 0; i < carouselitems.length; i += count) {
        carouselitems.slice(i, i + count).wrapAll("<div class='item'></div>");
    }
    $('#bestselling .carousel-inner .item').first().addClass('active');
}