jquery의 Wrap(), Wrap() 및 unwrap() 메서드에 대한 자세한 설명

wrap(): 일치하는 각 요소 외부에 지정된 HTML 구조를 추가합니다.

wrapAll(): 일치하는 모든 요소 외부에 지정된 HTML 구조를 전체로 추가합니다. wrap()함수는 지정된 HTML 구조를 일치하는 각 요소 외부에 wrap()函数用于在每个匹配元素外部包裹指定的HTML结构。

与该函数相对的是unwrap()函数，用于当前匹配元素的父元素(只移除父元素，其内部节点全部保留)。

该函数属于<a href="http://www.php.cn/wiki/1495.html" target="_blank">jQuery</a>对象(实例)。

语法

jQueryObject.wrap( wrapper )

参数

参数	描述
wrapper	String/Element/jQuery/Function类型用于包裹匹配元素的节点。

如果参数wrapper为字符串，则将其视作jQuery选择器或html字符串，jQuery会自行判断。

jQuery 1.4 新增支持：参数wrapper可以为函数。wrap()将根据匹配的所有元素遍历执行该函数，函数中的this将指向对应的DOM元素。

wrap()还会为函数传入一个参数，即当前元素在匹配元素中的索引。函数的返回值就是用于包裹的节点内容(可以是html字符串、DOM元素或jQuery对象)。

注意：如果wrapper匹配多个元素，则只将第一个元素作为包裹元素。

注意：如果wrapper是多层嵌套的元素(例如)，wrap()将从外往内检查每层嵌套的第一个节点。如果该节点没有子节点或者第一个子节点不是Element节点(比如文本节点、注释节点等)，就停止向内查找，直接在当前节点内部的末尾位置追加(append())当前匹配元素。

返回值

wrap()函数的返回值为jQuery类型，返回当前jQuery对象本身(以便于进行链式风格的编程)。

注意：即使wrapper元素是当前页面中的元素，该元素也不会从原位置上消失。因为wrap()使用的是该元素的副本(克隆)来充当包裹。

示例&说明

wrap()函数用于在每个匹配元素之前的位置插入内容：

<span class="tag"><p><span class="pln">段落文本1<span class="tag"><span></span></p><span class="pln"><br/><span class="tag"><p><span class="pln">段落文本2<span class="tag"><span></span></p><span class="pln"><br/><br/><span class="tag"><script<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text/<a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a>"<span class="tag">><span class="pln"><br/>$<span class="pun">(<span class="str">"p"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="pln"> <span class="str">&#39;<p></p>&#39;<span class="pln"> <span class="pun">);<span class="pln"> <br/><span class="tag"></script><span class="pln"><br/><br/><span class="com"><!--以下是jQuery代码执行后的html内容--><span class="pln"><br/><span class="tag"><p><p><span class="pln">段落文本1<span class="tag"><span></span></p></p><span class="pln"><br/><span class="tag"><p><p><span class="pln">段落文本2<span class="tag"><span></span></p></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

以下面这段HTML代码为例：

<span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">span#n2<span class="tag"></span><span class="pln">    <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/>    <span class="tag"><input<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text"<span class="pln"> <span class="tag">/><span class="pln"><br/><span class="tag"></p><span class="pln"><br/><span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">多层嵌套1<span class="tag"></span><span class="pln"><br/><span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n6"<span class="tag">><span class="pln">多层嵌套2<span class="tag"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

以下jQuery示例代码用于演示wrap()函数的具体用法：

<span class="com">// 在n2元素外包裹strong元素：<strong>{#n2}</strong><span class="pln"><br/>$<span class="pun">(<span class="str">"#n2"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="str">&#39;<strong/>&#39;<span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 在n4元素外包裹form元素：<form name="myForm">{#n4}</form><span class="pln"><br/>$<span class="pun">(<span class="str">"#n4"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="str">&#39;<form name="myForm"></form>&#39;<span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 在每个p元素外包裹p元素：<p data_id="index">{p}</p><span class="pln"><br/>$<span class="pun">(<span class="str">"p"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">index<span class="pun">){<span class="pln"><br/>    <span class="kwd"><a href="http://www.php.cn/wiki/135.html" target="_blank">return</a><span class="pln"> <span class="str">&#39;<p data_id="&#39;<span class="pln"> <span class="pun">+<span class="pln"> index <span class="pun">+<span class="pln"> <span class="str">&#39;"></p>&#39;<span class="pun">;<span class="pln">   <br/><span class="pun">}<span class="pln"> <span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 在n5元素外包裹嵌套的p元素：<p><p><em><b>{#n5}</b></em></p></p><span class="pln"><br/>$<span class="pun">(<span class="str">"#n5"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="pln"> <span class="str">&#39;<p><p><em><b></b></em></p></p>&#39;<span class="pln"> <span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 在n6元素外包裹嵌套的p元素：<p><p> <em><b></b></em>${#n5}</p></p><span class="pln"><br/><span class="com">// wrap()会从外层p依次往内部查找，以确定n5元素的所在位置<span class="pln"><br/><span class="com">// wrap()将从外往内检查每层嵌套的第一个元素，如果该元素没有子元素或者第一个子元素不是Element节点，就停止向内查找<span class="pln"><br/><span class="com">// 由于参数的&#39;<p>&#39;后面有空格(文本节点)，也就是说p元素的第一个子元素不是Element类型，因此直接将n6插入到p元素内部的末尾位置<span class="pln"><br/>$<span class="pun">(<span class="str">"#n6"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="pln"> <span class="str">&#39;<p><p> <em><b></b></em></p></p>&#39;<span class="pln"> <span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

运行代码

wrap() 래핑하는 데 사용됩니다. 이 함수와 관련된

🎜은 현재 일치하는 요소의 상위 요소에 사용되는 unwrap() 함수입니다(상위 요소만 제거되고 모든 내부 노드는 유지됩니다). 🎜🎜이 함수는 <a href="http://www.php.cn/wiki/1495.html" target="_blank">jQuery</a> 개체(인스턴스)에 속합니다. . 🎜

구문

<span class="tag"><p<span class="pln"> <span class="atn">data_id<span class="pun">=<span class="atv">"0"<span class="tag">><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><strong><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">span#n2<span class="tag"></span></strong><span class="pln">    <br/><span class="tag"></p></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">data_id<span class="pun">=<span class="atv">"1"<span class="tag">><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/>    <span class="tag"><form<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"myForm"<span class="tag">><input<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text"<span class="tag">></form><span class="pln"><br/><span class="tag"></p></p><span class="pln"><br/><span class="tag"><p><p><em><b><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">多层嵌套1<span class="tag"></span></b></em></p></p><span class="pln"><br/><span class="tag"><p><p><span class="pln"> <span class="tag"><em><b></b></em><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n6"<span class="tag">><span class="pln">多层嵌套2<span class="tag"></span></p></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

매개변수

tr>

매개변수	설명
래퍼	String/Element/jQuery/Function 유형은 요소와 일치하는 노드를 래핑하는 데 사용됩니다.

🎜 wrapper 매개변수가 문자열인 경우 jQuery 선택기 또는 html 문자열로 처리되며 jQuery는 자체적으로 만들어집니다. 심판. 🎜🎜jQuery 1.4 새로운 지원: wrapper 매개변수는 함수일 수 있습니다. wrap()은 일치하는 모든 요소를 ​​기반으로 이 함수를 순회하고 실행하며, 함수의 this는 해당 DOM 요소를 가리킵니다. 🎜🎜wrap()은 또한 매개변수를 함수에 전달합니다. 즉, 일치하는 요소 색인. 함수의 반환 값은 래핑에 사용되는 노드 콘텐츠입니다(html 문자열일 수 있음). , DOM 요소 또는 jQuery 객체). 🎜

참고: wrapper가 여러 요소와 일치하는 경우 첫 번째 요소만 래핑 요소로 사용됩니다. 🎜

참고: wrapper가 다중 레벨 중첩 요소인 경우(예를 들어) wrap()는 외부에서 발생합니다. 내부로 각 중첩 수준의 첫 번째 노드를 확인합니다. 노드에 하위 노드가 없거나 의 첫 번째 하위 노드가 요소 노드(예: 텍스트 노드, 주석 노드 등)가 아닌 경우 내부 검색을 중지합니다. 현재 노드에서 직접 검색합니다. 현재 일치하는 요소를 노드 내부의 끝 위치에 추가합니다. 🎜

반환 값

🎜wrap()함수의 반환 값은 jQuery 유형, 🎜현재 jQuery 객체 자체를 반환합니다🎜 (체인 스타일 프로그래밍을 용이하게 하기 위해). 🎜

참고: wrapper 요소가 현재 페이지의 요소인 경우에도 요소는 페이지에서 사라지지 않습니다. 원래 위치 . wrap()는 요소의 복사본(복제)을 사용하여 래퍼 역할을 하기 때문입니다. 🎜

예 및 설명

🎜wrap() 함수는 일치하는 각 요소 앞에 삽입하는 데 사용됩니다. 내용:🎜rrreee🎜다음 HTML 코드를 예로 들어보세요.🎜rrreee🎜다음 jQuery 샘플 코드는 wrap() 함수의 구체적인 사용법을 보여주기 위해 사용됩니다.🎜rrreee🎜코드 실행 🎜🎜 wrap()은 일치하는 요소의 양쪽에 래핑된 요소의 시작 태그와 끝 태그를 배치합니다. 🎜위 코드 뒤에는 추가 공백 문자가 추가되지 않습니다🎜. 다음과 같이 실행됩니다(형식(조정 없음): 🎜rrreee

위 내용은 jquery의 Wrap(), Wrap() 및 unwrap() 메서드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!