CODEWITHSUNDEEP
javascriptjquerywrapall
Arnaud de Vslt
Arnaud de Vslt

Reputation: 77

Wrap several div with other div

I have several div as following:

<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>

And I would like to add a new div (<div id='newdiv'>) in order to wrap the div I specify.

For example before 'id3' and after 'id5'. So we obtain:

<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>

Do you know jQuery code to do this?

Upvotes: 2

Views: 75

Answers (3)

PSL
PSL

Reputation: 123739

Probably a simple plugin to make it more flexible, reusable:

$.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 to get all the divs until the end div, then next to select the end div as well, and addback() to add the previous elements (nextUntil ones) to the collection and then add() to select the start div as well and then wrapAll of them.

Demo

Upvotes: 3

Collin Henderson
Collin Henderson

Reputation: 1154

In a bit of a hurry so this is untested but something like this?

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

EDIT: Oh damn, looks like Karl-André beat me to it!

Upvotes: 0

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

Use jQuery .wrapAll() :

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

Fiddle : http://jsfiddle.net/K4HVR/

Upvotes: 5

Related Questions