Home > Developer > JavaScript
Examples of wrapAll () method usage in jQuery, jquerywrapall
This document describes the wrapAll () method in jQuery. Share it with you for your reference. The specific analysis is as follows:
This method wraps all matching elements with a single element.
This method is similar to the wrap () method, but it is quite different. The wrap () method matches each Matching Element once.
Syntax 1:
Enclose the matching element with the specified DOM element.
Copy codeThe Code is as follows: $ (selector). wrapAll (elem)
Parameter List:
| Parameters | Description |
| Elem | The DOM element used to wrap the target. |
Instance:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Head>
<Title> helping customers </title>
<Style type = "text/css">
Div
{
Width: 200px;
Height: 200px;
Border: 1px solid blue;
Margin-top: 10px;
}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("P"). wrapAll (document. getElementById ("content "));
});
});
</Script>
</Head>
<Body>
<P> I am a paragraph </p>
<P> I am a paragraph </p>
<Div id = "content"> </div>
<Button> wrap each paragraph with a div </button>
</Body>
</Html>
Syntax 2:
Use html to mark the matching elements in the code.
Copy codeThe Code is as follows: $ (selector). wrapAll (html)
Parameter List:
| Parameters | Description |
| Elem | The DOM element used to wrap the target. |
Instance:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Head>
<Title> helping customers </title>
<Style type = "text/css">
. Content
{
Width: 200px;
Height: 200px;
Border: 1px solid blue;
}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("P"). wrapAll ("<div class = 'content'> </div> ");
});
});
</Script>
</Head>
<Body>
<P> This is a paragraph </p>
<P> This is a paragraph </p>
<Button> wrap each paragraph with a div </button>
</Body>
</Html>
I hope this article will help you with jQuery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
