DOM操作重组HTML

Question

我有以下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操作，但我不知道作为最好的办法。以文件或资源的方式寻找方向。谢谢。

Answer 1

试试这个（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> 

内