jQuery – usa wrap () per racchiudere più elementi?

Come utilizzerei wrap() per racchiudere più elementi (con classi diverse) all’interno di un

?

Ad esempio, nel modulo su cui sto lavorando c’è una grande lista di input ed etichette di checkbox sotto forma di:

   

eccetera

Voglio avvolgere un

attorno all’input e all’etichetta, quindi il risultato sarebbe:

 

Grazie!

È ansible utilizzare il metodo .wrapAll() .

 $('form > input').each(function(){ $(this).next('label').andSelf().wrapAll('
'); });

Se il tuo markup ha sempre lo stesso ordine, preferirei usare:

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

Dovrebbe essere significativo più veloce.

Rif .: .wrapAll () , .eSelf () , .slice ()

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

Se hai qualcosa del genere:

   

Quindi puoi usare jQuery:

  jQuery("#input1").next().andSelf().wrapAll('
'); jQuery("#input2").next().andSelf().wrapAll('
');

e ottieni questo:

 

Ha funzionato per me 🙂

La funzione jQuery wrapAll ti permette di racchiudere più elementi, ma se hai un DOM come hai scritto allora non funzionerà molto bene dato che non puoi facilmente abbinare una parte dell’etichetta e inserire un selettore. Suggerisco di aggiungere alcune classi a ciascuna parte e quindi utilizzare wrapAll.

     $('.i1').wrapAll('
'); $('.i2').wrapAll('
');

Questo ti darà