我有一些与以下内容基本相同的HTML:
<div id="row-1" class="row">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="col4"></div>
<div class="col5"></div>
</div>
<div id="row-2" class="row">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="col4"></div>
<div class="col5"></div>
</div>
<div id="row-3" class="row">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="col4"></div>
<div class="col5"></div>
</div>
现在,我需要使用jQuery选择col2, col3, col4,并在它们周围包装一个新的div对,以生成像这样的html:
<div id="row-n" class="row">
<div class="col1"></div>
<div class ="wrapped-1">
<div class="wrapped-2">
<div class="col2"></div>
<div class="col3"></div>
<div class="col4"></div>
</div>
</div>
<div class="col5"></div>
</div>
我有一些困难。我试过使用这个:
$('div[id^="row-"]')
.children('.col2, .col3, .col4')
.wrapInner('<div class="wrapped-2" />')
.wrapInner('<div class="wrapped-1" />');
…它给出了最接近我想要的结果,但是我需要外部的标签,而不是插入到所选元素中。. wrapall()似乎只是将所有项目分组到第一行,并从随后的行中剥离它们,这是完全错误的。
我对jQuery比较陌生,所以任何关于这方面的帮助和/或建议都将非常感谢!实际上在这种情况下应该使用的方法是wrapAll
方法,它用指定的元素包装所有选定的元素,通过使用each
方法可以防止这种情况,因此只有特定元素的子元素被包装。
$('div[id^="row-"]').each(function() {
$(this).children('.col2, .col3, .col4')
.wrapAll('<div class="wrapped-1"><div class="wrapped-2"></div></div>');
});
http://jsfiddle.net/rVfp9/