如何每隔一秒为class添加div

时间:2016-03-18 06:20:05

标签: javascript jquery

请帮忙.. 如何每隔一秒为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>

我想每隔一个项目添加一个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。 谢谢。

1 个答案:

答案 0 :(得分: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>