jQuery - use wrap() to wrap multiple elements?

Question

How would I go about using wrap() to wrap multiple elements (with different classes) inside a <div>?

For example, on the form I'm working on there is a big list of checkbox inputs and labels in the form of:

<input>
<label>
<input>
<label>

etc

I'm wanting to wrap a <div> around the input and label, so the result would be:

<div>
  <input>
  <label>
</div>
<div>
  <input>
  <label>
</div>

Thanks!

jAndy · Accepted Answer · 2010-08-13T09:54:14.100

109

You can use the .wrapAll() method.

$('form > input').each(function(){
    $(this).next('label').andSelf().wrapAll('<div class="test"/>');
});

If your markup has always the exact same order, I'd prefer to use:

var $set = $('form').children();    
for(var i=0, len = $set.length; i < len; i+=2){
    $set.slice(i, i+2).wrapAll('<div class="test"/>');
}

Should be significant faster.

Ref.: .wrapAll(), .andSelf(), .slice()

edited Aug 13 '10 at 09:54

answered Aug 13 '10 at 09:41

jAndy

231,737
57
305
359

2

This is probably the best way of doing that. – RaYell Aug 13 '10 at 09:43
Oddly enough, I just tried this on JS Fiddle, and it doesn't seem to work; however, James' answer, just below, does. – user1729506 Jun 20 '13 at 17:28
1

Hasn't what? Per the jQuery api docs: "This function has been deprecated and is now an alias for .addBack(), which should be used with jQuery 1.8 and later." – isherwood May 12 '14 at 17:24
6

.andSelf() has been removed in jQuery 3.0. .addBack() needs to be used. – David Dec 20 '16 at 19:40

score 5 · Answer 2 · answered Aug 13 '10 at 09:42

5

$('input+label').each(function(){
    $(this).prev().andSelf().wrapAll('<div>');
});

answered Aug 13 '10 at 09:42

James

109,676
31
162
175

score 1 · Answer 3 · edited Dec 23 '11 at 10:19

If you have something like this:

<input id="input1">
<label id="label1">
<input id="input2">
<label id="label2">

Then you can use jQuery:

 jQuery("#input1").next().andSelf().wrapAll('<div id="newDiv" />');
 jQuery("#input2").next().andSelf().wrapAll('<div id="newDiv" />');

and get this:

<div id="newDiv">
  <input id="input1">
  <label id="label1">
</div>
<div id="newDiv">
  <input id="input2">
  <label id="label2">
</div>

Worked for me :-)

score 0 · Answer 4 · answered Aug 13 '10 at 09:40

jQuery function wrapAll allows you to wrap multiple elements but if you have a DOM like you wrote then it won't work too well as you can't easily match a part of label and input with a selector. I suggest adding some classes to each part and then using wrapAll.

<input class="i1"/>
<label class="i1"/>
<input class="i2"/>
<label class="i2"/>

$('.i1').wrapAll('<div/>');
$('.i2').wrapAll('<div/>');

This will give you

<div>
    <input class="i1"/>
    <label class="i1"/>
</div>
<div>
    <input class="i2"/>
    <label class="i2"/>
<div>

jQuery - use wrap() to wrap multiple elements?

4 Answers4

Linked

Related