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)}));
});

<强> Demo

根据索引（基于0）选择奇数，即1,3,5等;迭代 odd 得到 prev 元素相对于奇数（需要配对），使用 ~~{ {3}}~~ andSelf 也可以选择它，然后在对上使用wrapAll。

如果你想忽略它们的第一个x，那么就这样做：

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

<强> addBack

Answer 2

您可以逐字使用jQueries Wrap功能。看看这里！

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

Answer 3

我不确定你希望用新的包装器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。

包裹元素对？

3 个答案: