如何在不复制我的包装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/