Detailed explanation of jQuery.wrapAll() function usage

wrapAll() function is used to wrap all matching elements with a single element.

This function belongs to the jQuery object (instance).

Syntax

jQuery 1.2 Added this function.

jQueryObject.wrapAll( wrapper )

Parameters

Parameter Description

wrapper String/Element/jQuery/Function type is used The node that wraps the matching element.

If the parameter wrapper is a string, it will be regarded as a jQuery selector or html string, and jQuery will make its own judgment.

If wrapper is not a function type, wrapAll() will move all matching elements to the position of the first matching element, and then wrap them all with the specified single element.

jQuery 1.4 New support: parameter wrapper can be a function. wrapAll() will traverse and execute this function based on all matching elements, and this in the function will point to the corresponding DOM element.

wrapAll() will also pass in a parameter 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 used for wrapping (can be an html string, DOM element or jQuery object).

Note: If wrapper matches multiple elements, only the first element will be used as the wrapping element.

Note: If the wrapper is a multi-level nested element (such as "

"), wrapAll() will check from outside to inside. The first node of each level of nesting. If the node has no child nodes or the first child node is not an Element node (such as text node, comment node, etc.), stop searching inward and directly append (append()) the current matching element at the end position inside the current node.

Return value

The return value of the wrapAll() function is of jQuery type, returning the current jQuery object itself (to facilitate chain-style programming).

Note: Even if the wrapper element is an element in the current page, the element will not disappear from its original position. Because wrapAll() uses a copy (clone) of the element to act as the wrapping element.

Example & Description

The wrapAll() function is used to wrap all matching elements with a single element:

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>
<script type="text/javascript">
$("p").wrapAll( &#39;<div></div>&#39; ); 
</script>
<!--以下是jQuery代码执行后的html内容-->
<div><p>段落文本1<span></span></p><p>段落文本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">
    <label id="n4">[label#n4]</label>
</p>
<span id="n5">[span#n5]</span>
<span id="n6">[span#n6]</span>

The following jQuery sample code is used to demonstrate the specific usage of the wrapAll() function:

// 在n4元素外包裹del元素：<del>{#n4}</del>
$("#n4").wrapAll(&#39;<del/>&#39;);
// 在所有span元素外包裹单个em元素：<em class="all-span">{#n2}{#n5}{#n6}</em>
// 所有span元素会先移动到第一个span元素的位置，然后全部被em元素包裹起来
$("span").wrapAll(&#39;<em class="all-span"></em>&#39;);

Run the code (please copy other codes to the demo page to run)

wrapAll() will The start tag and end tag of the wrapped element are placed on both sides of all matching elements, and no additional whitespace characters will be added. The complete html code after the above code is executed is as follows (the format has not been adjusted):

<p id="n1">
    <em class="all-span"><span id="n2">[span#n2]</span><span id="n5">[span#n5]</span><span id="n6">[span#n6]</span></em>    
</p>
<p id="n3">
    <del><label id="n4">[label#n4]</label></del>
</p>

The following is the jQuery sample code where the parameter wrapper is a function:

<p id="n1">
    <span id="n2">[span#n2]</span>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
</p>
<span id="n5">[span#n5]</span>
<span id="n6">[span#n6]</span>




    [span#n2]    


    [label#n4]

[span#n5]
[span#n6]
以下是wrapper参数为多层嵌套元素的jQuery示例代码：
[span#n1]
[label#n2]
[span#n3]



[span#n1][span#n3]
[label#n2]

The above is the detailed content of Detailed explanation of jQuery.wrapAll() function usage. For more information, please follow other related articles on the PHP Chinese website!