javascript - 如何每隔一个项目添加一个带有类的div

Question

请帮忙.. 如何每隔一个项目添加一个带有 class 的 div。 我有一个列表项:

<div class="col-sm-3">
    <div class="product rotation">
        <div>data 1</div>
    </div>

    <div class="product rotation">
        <div>data 2</div>
    </div>

    <div class="product rotation">
        <div>data 3</div>
    </div>

    <div class="product rotation">
        <div>data 4</div>
    </div>
</div>

我想每隔一个项目添加一个带有 class 的 div:

<div class="col-sm-12">
    <div class="col-sm-3 col-md-3 double-product">
        <div class="product rotation">
            <div>data 1</div>
        </div>

        <div class="product rotation">
            <div>data 2</div>
        </div>
    </div>
</div>

<div class="col-sm-12">
    <div class="col-sm-3 col-md-3 double-product">
        <div class="product rotation">
            <div>data 3</div>
        </div>

        <div class="product rotation">
            <div>data 4</div>
        </div>
    </div>
</div>

如何每隔一个项目添加一个带有 class 的 div。 谢谢。

Answer 1

为了实现代码中提供的输出，请使用以下内容。
这使用 wrapAll()循环中。

products = $('.product');

for(var i = 0; i < products.length; i+=2) {
  products.slice(i, i+2).wrapAll('<div class="col-sm-12"><div class="col-sm-3 col-md-3 double-product"></div></div>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-sm-3">
    <div class="product rotation">
        <div>data 1</div>
    </div>

    <div class="product rotation">
        <div>data 2</div>
    </div>

    <div class="product rotation">
        <div>data 3</div>
    </div>

    <div class="product rotation">
        <div>data 4</div>
    </div>
</div>