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 div中包含每个.item个元素，但由于我在网站上使用断点（响应），我必须重置count编号取决于断点，因此可以用作：setCarouselSlides(3);。

如果我这样做，每当我的div被包裹时，它们会被包含在.item div的+1层中，这样如果它首先是

<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>

当我启动.item功能时，如何强制它仅添加setCarouselSlides();包裹一次？

Answer 1

检查父元素中是否存在item css类：

if ( ! carouselitems.last().parent().hasClass("item") ) {
    carouselitems.slice(i, i+count).wrapAll("<div class='item'></div>");
}

小提琴here。

Answer 2

你可以打电话打开

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');
}

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

2 个答案: