包裹成对的元素

Wrap pairs of elements?

本文关键字：元素 包裹      更新时间：2023-09-26

如果您有以下代码：

<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>

有没有一种有效/简单的方法将一个新的div包装在每个a+b周围，使其看起来像这样：

<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需要有一个唯一的类）

包装内部的每两个div。parent

这样？

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

演示

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

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

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

演示

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

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

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

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

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

相关文章：