Birden çok div üzerinde parent div ekleme

Question

Bir ebeveyn div eklemek istiyorum.

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

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

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

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

Bunlar dört div'tur ve üstlerindeki bir üst div eklemek istiyorum. Bu

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

çalıştı Ama bu faceone sadece

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

yukarıda cubeSpinner ekliyor Ama sonuç Sen sırayla tüm unsurları seçmeniz gerekir bu

<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

gibi olmalıdır istiyorum Sarılmaları için. Onlara ortak sınıf ekleyerek önerirdim ama bu arada sen 'yüzü' ile başlayan bir id niteliği olmayan tüm unsurları seçmek için attribute selector[id^="face"] kullanabilirsiniz: Ben bu örneği gösterdik

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

Answer 2

JSfiddle https://jsfiddle.net/azu2s4r9/

Bunun için .wrapAll() jquery işlevini kullanmalı ve mevcut dört etiketinin her birine ortak sınıf adı eklemelisiniz. Yeni orijinal kodunuz böyle görünecek.

Ardından jQuery kodunuz böyle görünmelidir.

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

Ortaya çıkan kod, bunun nasıl bitmesini istediğiniz gibi görünecektir.

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

Bu tam bir çözüm sağlar ve hemen hemen her durumda çalışmalıdır. İyi şanslar!