Wrap of jquery (), wrap (), Unwrap () method detailed

"note" Wrap (): Adds the specified HTML structure to the outside of each matching Element.

Wrapall (): adds a specified HTML structure for all matching elements (as a whole) outside

原文地址：http://www.365mini.com/page/jquery-wrap.htm

wrap()The function is used to wrap the specified HTML structure outside of each matching element .

relative to the function is the unwrap () function, which is used for the parent element of the currently matching element (only the parent element is removed and its internal nodes are all reserved).

The function belongs to an jQuery object (instance).

Grammar

Jqueryobject.  Wrap()   

Parameters

Parameters	Description
Wrapper	The string/element/jquery/function type is used to wrap nodes that match Elements.

If the argument wrapper is a string, it is treated as a jquery selector or an HTML string, and jquery will judge for Itself.

added support for jQuery 1.4: parameters wrapper can be functions. wrap()The function will be executed according to all the elements of the match, and the this corresponding DOM element will be pointed to in the Function.

wrap()A parameter is also passed to the function, which is the index of the current element in the matching Element. The return value of the function is the node content (which can be an HTML string, a DOM element, or a jquery Object) for the Package.

note: if wrapper multiple elements are matched, only the first element is used as the package Element.

Note: If you wrapper have multiple layers of nested elements (such as <p><i></i></p>), the wrap() first node nested within each layer is checked from the Outside. If the node has no child nodes or the first child node is not an element node (such as a text node, comment node, etc.), It stops inward lookup and appends (append ()) the current matching element directly at the end of the current Node.

return value

wrap()The return value of the function is the jquery type, which returns the current jquery object itself (in order to facilitate Chain-style programming).

Note: even if the element wrapper is an element in the current page, the element will not disappear from its original Position. Because a wrap() copy (clone) of the element is used to act as a package.

Example & Description

wrap()The function is used to insert content before each matching element:

<p>Paragraph Text 1<span></span></p>
<p>Paragraph text 2<span></span></p>

<script type= "text /javascript "> 
 $ (" P " wrap (  );  
 </script> 
 
 <!-- The following is the HTML content after the jquery code is Executed--> 
 <div><p> paragraph text 1 <span></span></p></div> 
 < Div><p> paragraph text 2<span></span></p></div>  

Take the following HTML code as an example:

<p Id="n1">
<span Id="n2">Span#n2</span>
</p>
<p Id="n3"> 
     <input id= "n4"  type = "text"  /> 
 Span class= "tag" ></p> 
 <span  Id= "n5" > Multilayer nesting 1< /span> 
 <span id = "n6" > Multilayer nesting 2</ Span>                

The following jquery sample code demonstrates wrap() the specific use of a function:

Wrapping strong elements outside the N2 element: <strong>{#n2}</strong>
$("#n2").Wrap(' <strong/> ');


Wrapping the form element outside the N4 element: <form name= "myForm" >{#n4}</form>
$("#n4").Wrap(' <form name= ' myForm ' ></form> ');


Wrap div elements outside each p element: <div data_id= "index" >{p}</div>
$("p").Wrap( function(Index){
Return ' <div data_id= ' +Index+ ' ></div> ';
} );


Wrap nested div elements outside the N5 element: <div><p><em><b>{#n5}</b></em></p></div>
$("#n5").Wrap( ' <div><p><em><b></b></em></p></div> ');


Wraps nested div elements outside the N6 element:<div><p> <em><b></b></em>${#n5}</p></div>
Wrap () looks inside from the outer div in order to determine where the N5 element is located
Wrap () checks the first element nested within each layer from the outside, and stops looking inward if the element has no child elements or the first child element is not an element node
Since the parameter ' <p> ' is followed by a space (text node), that is, the first child element of the P element is not an element type, so insert N6 directly into the end position inside the P element
$("#n6").  Wrap( ' <div><p> <em><b></b></em></p></div> '  );

Run code

wrap()The opening and closing tags of the package elements are placed on either side of the matching element, and no additional whitespace characters are added , and the full HTML code after the code executes is as follows (no adjustments are made to the format):

<div data_id="0"><p Id="n1">
<strong><span Id="n2">Span#n2</span></strong>
</p></div>
<div data_id="1"><p Id="n3">
<form Name="myForm"><input Id="n4" type= "text" ></ Form> 
 </p></div> 
  <div><p><em><b><span id= "n5" > Multilayer nesting 1</span></b></em ></p></div> 
 <div><p> <em><b></b></em><span id = "n6" > Multilayer nesting 2</ span></p></div>            

jquery Wrap (), Wrap (), Unwrap () method detailed