This question already has answers here:
Wrap multiple div elements on same class
(5个答案)
4年前关闭。
我有以下HTML结构:
在移动设备上,我需要所有div来组织成一个单独的div。 b div和c相同,因此结果为:
我知道这将需要一些DOM操作,但是我不确定最好的方法。寻找有关文档或资源的方向。谢谢。
新包装器将全部包含在外部“包装器”中
(5个答案)
4年前关闭。
我有以下HTML结构:
<div class="wrapper">
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="c"></div>
</div>
在移动设备上,我需要所有div来组织成一个单独的div。 b div和c相同,因此结果为:
<div class="a-wrapper">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
<div class="b-wrapper">
<div class="b"></div>
<div class="b"></div>
</div>
<div class="c-wrapper">
<div class="c"></div>
</div>
我知道这将需要一些DOM操作,但是我不确定最好的方法。寻找有关文档或资源的方向。谢谢。
最佳答案
试试这个(demo)
var wrappers = [ 'a', 'b', 'c' ];
$.each(wrappers, function( index, value ) {
$('.' + value).wrapAll('<div class="' + value + '-wrapper"></div>');
});
新包装器将全部包含在外部“包装器”中
<div class="wrapper">
<div class="a-wrapper">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
<div class="b-wrapper">
<div class="b"></div>
<div class="b"></div>
</div>
<div class="c-wrapper">
<div class="c"></div>
</div>
</div>