javascript - 用其他 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，然后 next 也选择结束 div， addback()将前面的元素（nextUntil 元素）添加到集合中，然后add()也选择开始 div 和然后将它们全部包装起来。

演示

Answer 3

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

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

编辑：哦，该死的，看起来卡尔安德烈打败了我！