包裹元素对？

Question

如果您有以下代码:

<div class="parent">

    <div class="1a"></div>
    <div class="1b"></div>

    <div class="2a"></div>
    <div class="2b"></div>

    <div class="3a"></div>
    <div class="3b"></div>


</div>

是否有一种有效/简单的方法来围绕每个a + b包装一个新的div,所以它看起来像这样:

<div class="parent">

   <div class="new-1">        
       <div class="1a"></div>
       <div class="1b"></div>
   </div>

   <div class="new-2">        
       <div class="2a"></div>
       <div class="2b"></div>
   </div>

   <div class="new-3">        
       <div class="3a"></div>
       <div class="3b"></div>
   </div>


</div>

例如,我可以这样说:

用.parent中的每两个div <div class="new-(incremental variable)"></div>包装(新的包装div需要有一个唯一的类)

Answer 1

像这样？

$('.parent > div:odd').each(function(i){
    $(this)
       .prev()
       .addBack()
       .wrapAll($('<div/>',{'class': 'new-' + (i+1)}));
});

演示

根据索引(基于0)获得选择的奇数,即1,3,5等; 迭代奇数得到相对于奇数(需要配对)的prev元素,使用andSelf addBack来选择它然后在对上使用wrapAll.

如果你想忽略它们的第一个x,那么这样做:

$('.parent > div:gt(' + (x-1) + '):odd').each(function(i){
    $(this)
         .prev()
         .addBack()
         .wrapAll($('<div/>',{'class': 'new-' + (i+1)}));
})

演示