如何在不復制我的包裝div的情況下包裝表格行？

Question

我具有以下將由WordPress的生成代碼：

<h3> 
<span class="title">General Settings:</span> 
</h3> 
<table class="form-table"> 
<tbody> 
<div class="section_box1"><tr class="section1" valign="top"> 
<th scope="row">Hide Menu Background:</th> 
<td> 
<input id="" checked="" name="" type="checkbox"> 
</td> 
</tr><tr class="section1" valign="top"> 
<th scope="row"> 
Menu Background: 
</th> 
<td> 
<input name="" type="file"> 
</td> 
</tr></div> 
<div class="section_box2"><tr class="section2" valign="top"> 
<th scope="row">Hide Sidebar:</th> 
<td> 
<input id="" checked="" name="" type="checkbox"> 
</td> 
</tr><tr class="section2" valign="top"> 
<th scope="row">Hide Site Title:</th> 
<td> 
<input id="" checked="" name="" type="checkbox"> 
</td> 
</tr></div> 
</tbody> 
</table> 

現在將有兩個部分（tr.section1 & tr.section2）。
現在我將用兩個div（.section_box1 & .section_box2）來包裝這些部分。

所以我用下面的Jquery：

//Lets wrap those two sections inside divs ... 
$('tr.section1').not($('tr').eq(1)).each(function(){ 
$(this).add($(this).nextUntil('.section2')).wrapAll('<div class="section_box1"></div>'); 
}); 

    $('tr.section2').not($('tr').eq(3)).each(function(){ 
    $(this).add($(this).nextUntil('.section3')).wrapAll('<div class="section_box2"></div>'); 
    }); 

現在有了這個代碼的問題是：如果我在我的部分添加一個設置字段（複選框例如）我的包裝的div（section_box1 & section_box2）會重複（顯然我想避免這種情況）。

我創建了This Fiddle向您顯示我的問題。


因此，如何正確包裝我的部分而不重複我的包裝div，仍然能夠添加更多的字段內包裝div的section_box1 & section_box2？
我試圖讓本作幾個小時，但現在沒有運氣:(

預先感謝您傢伙！

Answer 1

你jQuery是可笑的瘋狂不必要的複雜性。:)

如果你真的只是想所有.section1tr s到被封閉在一個.section_box1div（與同爲第2節），你可以使用下面的做包裝：

//Lets wrap those two sections inside divs ... 
$('tr.section1').wrapAll('<div class="section_box1"></div>'); 
$('tr.section2').wrapAll('<div class="section_box2"></div>'); 

這裏查看更新小提琴：http://jsfiddle.net/QZKJM/1/