2010-08-13 14 views
38

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

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!

Respuesta

89

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

+2

Esta es probablemente la mejor manera de hacer eso. – RaYell

+0

Perfecto, justo lo que buscaba, muchas gracias. – Probocop

+0

Por extraño que parezca, acabo de probar esto en JS Fiddle, y parece que no funciona; sin embargo, la respuesta de James, justo debajo, sí. – user1729506

0

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> 
4
$('input+label').each(function(){ 
    $(this).prev().andSelf().wrapAll('<div>'); 
});​ 
1

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í :-)

Cuestiones relacionadas