Examples of wrapAll () method usage in jQuery
This article mainly introduces the usage of the wrapAll () method in jQuery. The example analyzes the functions, definitions, and usage skills of the wrapAll () method. For more information, see
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 the Code as follows:
$ (Selector). wrapAll (elem)
Parameter List:
| Parameters |
Description |
| Elem |
The DOM element used to wrap the target. |
Instance:
The 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.jb51.net/"/>
<Head>
<Title> feet home </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.
The Code is as follows:
$ (Selector). wrapAll (html)
Parameter List:
| Parameters |
Description |
| Elem |
The DOM element used to wrap the target. |
Instance:
The 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.jb51.net/"/>
<Head>
<Title> feet home </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.
