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> 

內