Hinzufügen von Eltern-Div über mehrere Divs

Question

Ich möchte ein Eltern-Div.

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

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

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

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

Dies sind vier Divs und ich möchte ein Elternteil div über ihnen hinzufügen. Ich habe versucht, diese

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

Aber dies ist das Hinzufügen cubeSpinner oben faceone nur

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

Aber ich möchte das Ergebnis wie dieses

<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

Sie benötigen sollten alle Elemente auszuwählen, um damit sie eingewickelt werden. Ich würde vorschlagen, eine gemeinsame Klasse zu ihnen hinzufügen, aber in der Zwischenzeit könnten Sie die attribute selector[id^="face"] verwenden, um alle Elemente mit einem id Attribute auszuwählen, die mit ‚Gesicht‘ beginnt:

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

Answer 2

ich dieses Beispiel gezeigt habe auf JSfiddle https://jsfiddle.net/azu2s4r9/

Sie sollten die jquery-Funktion .wrapAll() dafür verwenden und einen gemeinsamen Klassennamen zu jedem der vier vorhandenen <div>-Tags hinzufügen. Ihr neuer Originalcode wird so aussehen.

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

Dann sollte Ihr jquery Code wie folgt aussehen.

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

Der resultierende Code sieht so aus, wie Sie es beenden wollten.

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

Dies bietet eine vollständige Lösung und sollte in fast allen Fällen funktionieren. Viel Glück!