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!

Answer 1

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

Answer 2

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