Adding parent div over multiple divs

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>

solution

You need to select all the elements in order for them to be wrapped. I’d suggest adding a common 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>');