如何在不复制我的包装器 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太复杂了。:)

如果您真的只想将所有的.section1 tr s都包含在一个.section_box1 div中(第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/