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＆amp; tr.section2）。
现在我将用两个div（.section_box1＆amp; .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＆amp; section_box2）将会重复（显然我想避免这种情况）。

我创建了This Fiddle来向你展示我的问题。

那么如何在不重复我的包装div的情况下正确包装我的部分，并且仍然能够在包装div的section_box1＆amp;中添加更多字段。 section_box2？我现在试着让这几个小时，但没有运气:(

提前谢谢你们!!

Answer 1

你的jQuery非常疯狂，不必要地复杂化。：）

如果您真的只想将所有.section1 tr括在一个.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/

如何包装表行而不重复我的包装div？

1 个答案: