Javascript 包裹成对的元素？

如果您有以下代码：

<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.parent div {width:50%;}
div.parent div:nth-child(odd) {clear:both; float:left;}
div.parent div:nth-child(even) {float:right;}

例如，我可以说：

每两个div包装一次。父级使用

（新包装div需要有一个唯一的类）

像这样吗

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

$（'.parent>div:odd'）。每个（函数（i）{
$（本）
.prev（）
.addBack（）
.wrapAll（$（''，{'class'：'new-'+（i+1）}））；
});

根据索引（基于0）选择奇数，即1、3、5等；迭代一个得到相对于奇数（需要配对）的元素，使用也选择该元素，然后对该对使用wrapAll

如果要忽略其中的第一个x，请执行以下操作：

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

$（'.parent>div:gt（'+（x-1）+'）：奇数'）。每个（函数（i）{
$（本）
.prev（）
.addBack（）
.wrapAll（$（''，{'class'：'new-'+（i+1）}））；
})

像这样吗

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

$（'.parent>div:odd'）。每个（函数（i）{
$（本）
.prev（）
.addBack（）
.wrapAll（$（''，{'class'：'new-'+（i+1）}））；
});

根据索引（基于0）选择奇数，即1、3、5等；迭代一个得到相对于奇数（需要配对）的元素，使用也选择该元素，然后对该对使用wrapAll

如果要忽略其中的第一个x，请执行以下操作：

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

$（'.parent>div:gt（'+（x-1）+'）：奇数'）。每个（函数（i）{
$（本）
.prev（）
.addBack（）
.wrapAll（$（''，{'class'：'new-'+（i+1）}））；
})

---

您可以直接使用jquerys Wrap函数。看看这里

---

您可以直接使用jquerys Wrap函数。看看这里

---

我不确定您希望用新的包装器div实现什么，但是CSS中的第n个子项可能有用。试着这样做：

<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.parent div {width:50%;}
div.parent div:nth-child(odd) {clear:both; float:left;}
div.parent div:nth-child(even) {float:right;}

---

…这将为您提供成对的div。

我不确定您希望使用新的包装div实现什么，但CSS中的第n个子项可能会有用。试着这样做：

<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.parent div {width:50%;}
div.parent div:nth-child(odd) {clear:both; float:left;}
div.parent div:nth-child(even) {float:right;}

---

…这将为您提供一对并排的div。

绝对棒极了。非常感谢。（删除其他问题，解决它并完美工作）再次非常感谢：）@user241333刚刚注意到其他问题也是urs:）应该注意的是，从jQuery1.8开始，它就被弃用了。如果您使用的是jQuery1.8或更高版本，请使用。绝对棒极了。非常感谢。（删除其他问题，解决它并完美工作）再次非常感谢：）@user241333刚刚注意到其他问题也是urs:）应该注意的是，从jQuery1.8开始，它就被弃用了。如果使用jQuery 1.8或更高版本，请使用。是否生成原始div？最好的做法是在该点生成周围的div。如果它们是静态的，那么也应该对周围的div进行静态编码。您还应该考虑在子元素上使用较少的特定类名。例如，

class=“a”

和

class=“b”

是可重复使用的-它们前面不需要数字，因为它们不需要是唯一的。如果需要对每个组进行不同的样式设置，可以使用父节点进行更具体的选择。例如

new-3a

和

new-3B

，但即使是那些父节点也是相当特定的类。是否生成了原始div？最好的做法是在该点生成周围的div。如果它们是静态的，那么也应该对周围的div进行静态编码。您还应该考虑在子元素上使用较少的特定类名。例如，

class=“a”

和

class=“b”

是可重复使用的-它们前面不需要数字，因为它们不需要是唯一的。如果需要对每个组进行不同的样式设置，可以使用父节点进行更具体的选择。例如，

new-3a

和

new-3B

，但即使这些父节点也是相当特定的类。