1

如果您有以下代码：

<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 class="new-(incremental variable)"></div>（新的包装 div 需要有一个唯一的类）

4

3 回答 3

6

像这样？

$('.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)}));
})

演示

于 2013-07-01T22:10:17.287 回答
0

我不确定您希望使用新的包装器 div 实现什么，但 CSS 中的 nth-child 可能有用。尝试这样的事情：

div.parent div {width:50%;}
div.parent div:nth-child(odd) {clear:both; float:left;}
div.parent div:nth-child(even) {float:right;}

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

于 2013-07-01T22:25:09.697 回答
0

您可以从字面上使用 jQueries Wrap 功能。看看这里！

http://api.jquery.com/wrap/

于 2013-07-01T22:10:57.173 回答