Question

我有以下几个div：

<div id='id1'>blabla</div>
<div id='id2'>blabla</div>
<div id='id3'>blabla</div>
<div id='id4'>blabla</div>
<div id='id5'>blabla</div>
<div id='id6'>blabla</div>

我想添加一个新div（<div id='newdiv'>）以包装我指定的div。

例如在'id3'之前和'id5'之后。所以我们得到：

<div id='id1'>blabla</div>
<div id='id2'>blabla</div>
<div id='newdiv'>
  <div id='id3'>blabla</div>
  <div id='id4'>blabla</div>
  <div id='id5'>blabla</div>
</div>
<div id='id6'>blabla</div>

你知道jQuery代码吗？

Answer 1

使用jQuery .wrapAll()：

$('#id3, #id4, #id5').wrapAll('<div id="newdiv" />')

小提琴：http://jsfiddle.net/K4HVR/

Answer 2

可能是一个简单的插件，使其更灵活，可重复使用：

$.fn.customWrap = function (end, wrapperDivAttr) {
    this.nextUntil(end).next().addBack().add(this).wrapAll($('<div/>', wrapperDivAttr));
}

$('#id3').customWrap('#id5', { id: 'newDiv'}); // call the function on the startelement, specify the end elements selector and attribute obj.

nextUntil 获取所有div直到结束div，然后选择结束div，然后 addback() 添加先前的元素（nextUntil）到集合，然后 add() 来选择开始div，然后选择 wrapAll 。

<强> Demo

Answer 3

有点匆忙，所以这是未经测试但是这样的事情？

 $("#id3, #id4, #id5").wrapAll('<div id="newdiv" />');

编辑：哦，该死的，看起来Karl-André打败了我！

用其他div包装几个div

3 个答案: