Crear envoltorio div alrededor de otros dos divs con jQuery

Question

¿Cómo puedo agregar un elemento div alrededor de 2 (o más) div? Lo que pienso:

HTML:

<div class="list-price">20000</div> 
<div class="sell-price">10000</div> 

jQuery:

$('div.list-price').each(function() { 
    $(this).before('<div class="action-price">'); 
    $(this).next().after('</div>'); 
    }); 

esperaba que el código de seguridad hará esto:

<div class="action-price"> 
<div class="list-price">20000</div> 
<div class="sell-price">10000</div> 
</div> 

Pero:

<div class="action-price"></div> 
<div class="list-price">20000</div> 
<div class="sell-price">10000</div> 

¿Alguien puede ayudarme?

Gracias,

Gabor

Answer 1

Usted está pensando en los elementos como código HTML, sino que son objetos. No puede agregar las etiquetas de inicio y finalización por separado, porque no son elementos completos.

Agregar nuevo elemento, y mover los divs existentes en su interior:

$('div.list-price').each(function() { 
    var newDiv = $('<div/>').addClass('action-price'); 
    $(this).before(newDiv); 
    var next = $(this).next(); 
    newDiv.append(this).append(next); 
}); 

Demostración: http://jsfiddle.net/Guffa/eFXbN/1/

Answer 2

$first = ... // the 1st element 
$rest = ... // other elements, may be just the second one 
$first.wrap('<div class="wrapper"/>').parent().append($rest) 

Answer 3

tuve que Revese su última línea a:

$ reposo. wrap (''). parent(). append ($ first);

Answer 4

Un buen enfoque para esto es hacer lo siguiente.

$("div.list-price").each(function(){ 
    $(this).nextUntil("div.list-price").andSelf().wrapAll("<div class='action-price'></div>"); 
}); 

Es simple y legible, probablemente la forma en que los desarrolladores de jQuery intentaron escribirlo.

Answer 5

Trate de usar la función wrapAll:

$('.list-price, .sell-price').wrapAll('<div class="action-price" />');