用其他 div 包裹几个 div答案

【问题标题】：Wrap several div with other div用其他 div 包裹几个 div
【发布时间】：2013-07-06 04:28:16
【问题描述】：

我有几个 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 代码吗？

【问题讨论】：

标签： javascript jquery wrapall

【解决方案1】：

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

$.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，然后 wrapAll 选择它们。

Demo

【讨论】：

感谢@Sushanth，否则它会变得如此明显.. :)
@PSL 我回答了 OP 的问题 ;) 但我喜欢插件的想法，但你错过了一些东西，改变了一点：jsfiddle.net/EVc46/1

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

使用jQuery .wrapAll()：

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

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

【讨论】：