用其他div包装几个div

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 ones）添加到集合然后add()以选择开始div以及然后wrapAll他们。

Demo

Answer 3

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

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

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