javascript - 包装成对的元素？

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>

例如，我可以这样说吗:

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

Answer 1

像这样？

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

Demo

根据索引(基于 0)获取奇数，即 1、3、5 等；迭代 odd 得到 prev 元素相对于奇数(需要配对)，使用 andSelf addBack 也选择它，然后在该对上使用 wrapAll。

如果您想忽略其中的前 x 个，请执行以下操作:

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

Demo