This question already has answers here:
Wrap multiple div elements on same class
                                
                                    (5个答案)
                                
                        
                                4年前关闭。
            
                    
我有以下HTML结构:

<div class="wrapper">
   <div class="a"></div>
   <div class="b"></div>
   <div class="a"></div>
   <div class="b"></div>
   <div class="a"></div>
   <div class="c"></div>
</div>


在移动设备上,我需要所有div来组织成一个单独的div。 b div和c相同,因此结果为:

<div class="a-wrapper">
   <div class="a"></div>
   <div class="a"></div>
   <div class="a"></div>
</div>

<div class="b-wrapper">
   <div class="b"></div>
   <div class="b"></div>
</div>

<div class="c-wrapper">
   <div class="c"></div>
</div>


我知道这将需要一些DOM操作,但是我不确定最好的方法。寻找有关文档或资源的方向。谢谢。

最佳答案

试试这个(demo

var wrappers = [ 'a', 'b', 'c' ];
$.each(wrappers, function( index, value ) {
  $('.' + value).wrapAll('<div class="' + value + '-wrapper"></div>');
});


新包装器将全部包含在外部“包装器”中

<div class="wrapper">
   <div class="a-wrapper">
       <div class="a"></div>
       <div class="a"></div>
       <div class="a"></div>
   </div>
   <div class="b-wrapper">
       <div class="b"></div>
       <div class="b"></div>
   </div>
   <div class="c-wrapper">
       <div class="c"></div>
   </div>
</div>

09-10 11:29
查看更多