我有以下将由 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 中添加更多字段?
我正在尝试做这个几个小时,但没有运气:(
提前谢谢你们!!