2011-08-16 8 views
5

Come posso aggiungere un elemento div intorno a 2 (o più) div? Quello che penso:Crea wrapper div con altre due div con jQuery

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>'); 
    }); 

Speravo che il codice sopra farà questo:

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

Ma:

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

Qualcuno può aiutarmi?

Grazie,

Gabor

+0

vostra prima e dopo gli usi non sono valide come questi metodi non scrivere il testo per il contenuto del documento, che invece scrivono _nodes_. così, il primo ('prima') inserisce il tag auto-closing (bu jQuery stesso), e il secondo ('dopo') salta a causa del markup non valido – Guard

risposta

1

si sta pensando di elementi come il codice HTML, ma sono oggetti. Non è possibile aggiungere separatamente il tag iniziale e finale, perché non sono elementi completi.

Aggiungere il nuovo elemento, e spostare il div esistenti al suo interno:

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

Demo: http://jsfiddle.net/Guffa/eFXbN/1/

+0

Thx Guffa, hai ragione, ma manca una linea all'interno di ciascuno (): $ (this) .parent ('div'). AddClass ('action-price'); – riskogab

+0

@riskogab: L'ho già aggiunto, e anche un collegamento a una demo. :) – Guffa

+2

vedere il mio approccio e la risposta, è più pulito. http://jsfiddle.net/blowsie/eFXbN/7/ – Blowsie

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

ho dovuto Revese tua ultima riga a:

$ riposo. avvolgere ('') genitore() aggiungere ($ prima)..;

1

Un buon approccio a questo è quello di fare quanto segue.

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

È semplice e leggibile, probabilmente il modo in cui gli sviluppatori di jQuery intendevano che fosse scritto.

6

provare ad utilizzare la funzione di wrapAll:

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