The jQuery wrapAll() method can be used to wrap all the selected elements with the specified HTML wrapping element. You have to specify the HTML wrapping element to wrap around all the selected elements.
Syntax
The syntax of this method is given below:-
Description of the Parameters
The above syntax takes two parameters to use the method. The description of these parameters is given below.
| Parameter Name | Description |
|---|---|
| selector | Specify the element to select and wrap using the method. Use tag name, class name, or id of the elements to select. It is a required field. |
| htmlwrappingElement | You have to Specify the HTML element to wrap all the selected elements. It is a required field. |
jQuery wrapAll() Method to Wrap All Selected Element
If you want to wrap all the selected elements within the specified wrapping HTML element. You can use this method as given in the example below.
The example contains 3 paragraphs element to wrap. The jQuery wrapAll() method wraps all these paragraphs with the specified wrapping div element. The example uses the click event to wrap the element on button click.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function(){ $('.wrapbtn').click(function(){ $("p").wrapAll("<div></div>"); }); }); </script> <style> div{ background: #34d234; border: 1px solid #000; padding: 10px; color: #fff; } </style> <p>First paragraph.</p> <p>Second paragraph.</p> <p>Third paragraph.</p><br> <button type="button" class="wrapbtn">Click to Wrap</button> |
Output
First paragraph.
Second paragraph.
Third paragraph.
When you click the button given above, the wrapping element wraps all the selected paragraph element with the div element. The div element contains some CSS property which automatically gets added on wrapping.
The above example using the click event to wrap the element. When you click the button given above, the div element got wrapped around the paragraph element.
You may also like to read
I hope you like this tutorial on jQuery wrapAll() method. If you have any queries regarding the tutorial, please comment below.
References