Menu
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>
532
You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
Method 1: First method is to simply assign 100% width and 100% height to the child div so that it will take all available space of the parent div. Consider this HTML for demonstration: HTML.
Make the outer div position="relative" and the inner div position="absolute" and set it's bottom="0" .
The :parent Selector page on jQuery says: Select all elements that have at least one child node (either an element or text). So $('div') would select all divs and $('div:parent') would select only those with children.
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>');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
