Aggiunta di div genitore su più div

Question

Desidero aggiungere un div genitore.

<div id="faceone"><img src=""></div> 

<div id="facetwo" ><img src=""></div> 

<div id="facethree"><img src=""></div 

<div id="facefour"><img src=""></div> 

Questi sono quattro div e voglio aggiungere un div padre sopra di loro. Ho provato questo

$('#faceone').wrapAll('<div class="cubeSpinner">'); 

Ma questo è l'aggiunta cubeSpinner sopra faceone solo

<div class="cubeSpinner"> 

<div id="faceone"><img src=""></div> 

</div> 
<div id="facetwo" ><img src=""></div> 

<div id="facethree"><img src=""></div 

<div id="facefour"><img src=""></div> 

ma voglio che il risultato dovrebbe essere simile a questo

<div class="cubeSpinner"> 

<div id="faceone"><img src=""></div> 

<div id="facetwo" ><img src=""></div> 

<div id="facethree"><img src=""></div 

<div id="facefour"><img src=""></div> 

</div> 

Answer 1

È necessario selezionare tutti gli elementi in ordine per loro essere avvolti. Io suggerirei di aggiungere una classe comune per loro, ma nel frattempo è possibile utilizzare la attribute selector[id^="face"] per selezionare tutti gli elementi con un attributo id che inizia con 'volto':

$('[id^="face"]').wrapAll('<div class="cubeSpinner"></div>'); 

Answer 2

Ho mostrato questo esempio su JSfiddle https://jsfiddle.net/azu2s4r9/

È necessario utilizzare la funzione jquery .wrapAll() per questo e aggiungere un nome classe comune a ciascuno dei quattro tag esistenti <div>. Il tuo nuovo codice originale sarà simile a questo.

<div id="faceone" class="test"><img src=""></div> 
<div id="facetwo" class="test"><img src=""></div> 
<div id="facethree" class="test"><img src=""></div> 
<div id="facefour" class="test"><img src=""></div> 

Quindi il codice jQuery dovrebbe assomigliare a questo.

$('.test').wrapAll('<div class="cubeSpinner">Testing</div>'); 

Il codice risultante sarà simile a quello che volevi che finisse.

<div class="cubeSpinner">Testing 
<div id="faceone" class="test"><img src=""></div> 
<div id="facetwo" class="test"><img src=""></div> 
<div id="facethree" class="test"><img src=""><div> 
<div id="facefour" class="test"><img src=""></div> 
</div> 

Ciò fornisce una soluzione completa e dovrebbe funzionare in quasi tutti i casi. In bocca al lupo!