如何在每個第二項中添加div類

Question

請幫助.. 如何在每個第二項中添加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 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> 

如何加分度類中的每個第二個項目。 謝謝。

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>