jQuery - use wrap() para envolver varios elementos?

Question

¿Cómo podría usar wrap() para envolver varios elementos (con diferentes clases) dentro de un <div>?

Por ejemplo, en la forma que estoy trabajando en que hay una gran lista de entradas de casillas de verificación y las etiquetas en forma de:

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

etc

Estoy queriendo envolver un <div> alrededor de la entrada y la etiqueta, por lo que el resultado sería:

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

Gracias!

Answer 1

Usted puede utilizar el método .wrapAll().

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

Si su margen de beneficio tiene siempre el mismo orden exacto, yo prefiero usar:

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

En caso de ser significativo más rápido.

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

Answer 2

La función jQuery wrapAll le permite ajustar varios elementos, pero si tiene un DOM como el que escribió, no funcionará demasiado, ya que no puede hacer coincidir fácilmente una parte de la etiqueta y la entrada con un selector. Sugiero agregar algunas clases a cada parte y luego usar wrapAll.

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

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

Esto le dará

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

Answer 3

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

Answer 4

Si usted tiene algo como esto:

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

continuación, puede utilizar jQuery:

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

y conseguir esto:

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

trabajado para mí :-)