I want to add a parent 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>

These are four divs and i want to add a parent div above them. I tried this

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

But this is adding cubeSpinner above faceone only

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

But i want the result should be like this

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

I want to add a parent 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>

These are four divs and i want to add a parent div above them. I tried this

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

But this is adding cubeSpinner above faceone only

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

But i want the result should be like this

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

• javascript
• jquery
• css
• html

2 Answers 2

You need to select all the elements in order for them to be wrapped. I'd suggest adding a mon class to them, but in the meantime you could use the attribute selector [id^="face"] to select all elements with an id attribute that begins with 'face':

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

I've shown this example on JSfiddle https://jsfiddle/azu2s4r9/

You should use the .wrapAll() jquery function for this and add a mon class name to each of the four existing <div> tags. Your new original code will look like this.

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

Then your jquery code should look like this.

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

The resulting code will look like this which is how you wanted it to finish.

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

This provides a plete solution and should work in pretty much all cases. Good luck!