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">'<p></p>'<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">'<strong/>'<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">'<form name="myForm"></form>'<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">'<p data_id="'<span class="pln"> <span class="pun">+<span class="pln"> index <span class="pun">+<span class="pln"> <span class="str">'"></p>'<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">'<p><p><em><b></b></em></p></p>'<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">// 由于参数的'<p>'后面有空格(文本节点)，也就是说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">'<p><p> <em><b></b></em></p></p>'<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() 래핑하는 데 사용됩니다. 이 함수와 관련된
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7518
15
1378
52
81
11
53
19
21
68
WeChat 친구를 삭제하는 방법은 무엇입니까? 위챗 친구 삭제하는 방법
Mar 04, 2024 am 11:10 AM
WeChat은 주류 채팅 도구 중 하나입니다. WeChat을 통해 새로운 친구를 만나고, 옛 친구와 연락하고, 친구 간의 우정을 유지할 수 있습니다. 끝나지 않는 연회가 없듯이, 사람들이 어울리다 보면 필연적으로 의견 차이가 생기기 마련입니다. 어떤 사람이 귀하의 기분에 극도로 영향을 미치거나, 사이좋게 지낼 때 귀하의 견해가 일관되지 않고 더 이상 의사소통을 할 수 없는 경우, WeChat 친구를 삭제해야 할 수도 있습니다. WeChat 친구를 삭제하는 방법은 무엇입니까? WeChat 친구를 삭제하는 첫 번째 단계: 기본 WeChat 인터페이스에서 [주소록]을 탭합니다. 두 번째 단계: 삭제하려는 친구를 클릭하고 [세부정보]를 입력합니다. 세 번째 단계: 상단의 [...]를 클릭합니다. 4단계: 아래의 [삭제]를 클릭합니다. 5단계: 페이지 메시지를 이해한 후 [연락처 삭제]를 클릭합니다.
Tomato Free Novel 앱에서 소설 쓰는 방법 Tomato Novel에서 소설 쓰는 방법에 대한 튜토리얼을 공유하세요.
Mar 28, 2024 pm 12:50 PM
Tomato Novel은 매우 인기 있는 소설 읽기 소프트웨어입니다. 우리는 종종 Tomato Novel에서 읽을 새로운 소설과 만화를 가지고 있습니다. 많은 친구들도 용돈을 벌고 소설의 내용을 편집하고 싶어합니다. 글로 쓰고 싶은데, 그 안에 소설을 어떻게 쓰는지 친구들도 모르니까, 소설 쓰는 방법에 대한 소개를 함께 살펴보는 시간을 가져보겠습니다. 토마토 소설을 사용하여 소설을 쓰는 방법에 대한 튜토리얼을 공유하세요. 1. 먼저 휴대폰에서 토마토 무료 소설 앱을 열고 개인 센터 - 작가 센터를 클릭하세요. 2. 토마토 작가 도우미 페이지로 이동하여 새로 만들기를 클릭하세요. 소설의 끝 부분에 예약하십시오.
컬러풀 마더보드에서 바이오스로 진입하는 방법은 무엇입니까? 두 가지 방법을 가르쳐주세요.
Mar 13, 2024 pm 06:01 PM
컬러풀한 마더보드는 중국 국내 시장에서 높은 인기와 시장 점유율을 누리고 있지만 일부 컬러풀한 마더보드 사용자는 아직도 설정을 위해 BIOS에 진입하는 방법을 모르시나요? 이러한 상황에 대응하여 편집자는 다채로운 마더보드 BIOS에 들어갈 수 있는 두 가지 방법을 특별히 가져왔습니다. 방법 1: U 디스크 시작 단축키를 사용하여 U 디스크 설치 시스템에 직접 들어갑니다. 한 번의 클릭으로 U 디스크를 시작하는 Colour 마더보드의 단축키는 ESC 또는 F11입니다. 먼저 Black Shark 설치 마스터를 사용하여 Black을 만듭니다. Shark U 디스크 부팅 디스크를 켠 후 컴퓨터를 켜면 시작 화면이 나타나면 키보드의 ESC 또는 F11 키를 계속 눌러 시작 항목을 순차적으로 선택할 수 있는 창으로 커서를 "USB. "가 표시된 후
WeChat에서 삭제된 연락처를 복구하는 방법(삭제된 연락처를 복구하는 방법을 알려주는 간단한 튜토리얼)
May 01, 2024 pm 12:01 PM
불행하게도 사람들은 어떤 이유로든 실수로 특정 연락처를 삭제하는 경우가 많습니다. WeChat은 널리 사용되는 소셜 소프트웨어입니다. 사용자가 이 문제를 해결할 수 있도록 이 문서에서는 삭제된 연락처를 간단한 방법으로 검색하는 방법을 소개합니다. 1. WeChat 연락처 삭제 메커니즘을 이해하면 삭제된 연락처를 검색할 수 있습니다. WeChat의 연락처 삭제 메커니즘은 연락처를 주소록에서 제거하지만 완전히 삭제하지는 않습니다. 2. WeChat에 내장된 "연락처 복구" 기능을 사용하세요. WeChat은 "연락처 복구"를 제공하여 시간과 에너지를 절약합니다. 사용자는 이 기능을 통해 이전에 삭제한 연락처를 빠르게 검색할 수 있습니다. 3. WeChat 설정 페이지에 들어가서 오른쪽 하단을 클릭하고 WeChat 애플리케이션 "나"를 열고 오른쪽 상단에 있는 설정 아이콘을 클릭하여 설정 페이지로 들어갑니다.
Win11에서 관리자 권한을 얻는 방법 요약
Mar 09, 2024 am 08:45 AM
Win11 관리자 권한을 얻는 방법에 대한 요약 Windows 11 운영 체제에서 관리자 권한은 사용자가 시스템에서 다양한 작업을 수행할 수 있도록 하는 매우 중요한 권한 중 하나입니다. 때로는 소프트웨어 설치, 시스템 설정 수정 등과 같은 일부 작업을 완료하기 위해 관리자 권한을 얻어야 할 수도 있습니다. 다음은 Win11 관리자 권한을 얻는 몇 가지 방법을 요약한 것입니다. 도움이 되기를 바랍니다. 1. 단축키를 사용하세요. Windows 11 시스템에서는 단축키를 통해 명령 프롬프트를 빠르게 열 수 있습니다.
휴대폰에서 글꼴 크기를 설정하는 방법(휴대폰에서 글꼴 크기를 쉽게 조정)
May 07, 2024 pm 03:34 PM
휴대폰이 사람들의 일상 생활에서 중요한 도구가 되면서 글꼴 크기 설정은 중요한 개인화 요구 사항이 되었습니다. 다양한 사용자의 요구를 충족하기 위해 이 기사에서는 간단한 조작을 통해 휴대폰 사용 경험을 개선하고 휴대폰의 글꼴 크기를 조정하는 방법을 소개합니다. 휴대폰의 글꼴 크기를 조정해야 하는 이유 - 글꼴 크기를 조정하면 텍스트가 더 명확하고 읽기 쉬워집니다. - 다양한 연령대의 사용자의 읽기 요구에 적합 - 시력이 좋지 않은 사용자가 글꼴 크기를 사용하는 것이 편리합니다. 휴대폰 시스템의 설정 기능 - 시스템 설정 인터페이스에 들어가는 방법 - 찾기에서 설정 인터페이스의 "디스플레이" 옵션을 입력합니다. - "글꼴 크기" 옵션을 찾아 타사를 통해 글꼴 크기를 조정합니다. 애플리케이션 - 글꼴 크기 조정을 지원하는 애플리케이션 다운로드 및 설치 - 애플리케이션을 열고 관련 설정 인터페이스로 진입 - 개인에 따라
모바일 드래곤 알 부화의 비밀이 공개됩니다(모바일 드래곤 알을 성공적으로 부화하는 방법을 단계별로 알려드립니다)
May 04, 2024 pm 06:01 PM
모바일 게임은 기술의 발전과 함께 사람들의 삶에 없어서는 안될 부분이 되었습니다. 귀여운 드래곤 알 이미지와 흥미로운 부화 과정으로 많은 플레이어들의 관심을 끌었으며, 특히 주목을 받은 게임 중 하나가 드래곤 알 모바일 버전이다. 플레이어가 게임에서 자신만의 드래곤을 더 잘 육성하고 성장시킬 수 있도록 이 글에서는 모바일 버전에서 드래곤 알을 부화시키는 방법을 소개합니다. 1. 적절한 유형의 드래곤 알을 선택하십시오. 플레이어는 게임에서 제공되는 다양한 유형의 드래곤 알 속성과 능력을 기반으로 자신이 좋아하고 적합한 드래곤 알 유형을 신중하게 선택해야 합니다. 2. 부화기의 레벨을 업그레이드하세요. 플레이어는 작업을 완료하고 소품을 수집하여 부화기의 레벨을 향상시켜야 합니다. 부화기의 레벨에 따라 부화 속도와 부화 성공률이 결정됩니다. 3. 플레이어가 게임에 참여하는데 필요한 자원을 수집하세요.
Oracle 버전 조회 방법에 대한 자세한 설명
Mar 07, 2024 pm 09:21 PM
Oracle 버전 쿼리 방법에 대한 자세한 설명 Oracle은 세계에서 가장 널리 사용되는 관계형 데이터베이스 관리 시스템 중 하나이며 풍부한 기능과 강력한 성능을 제공하며 기업에서 널리 사용됩니다. 데이터베이스 관리 및 개발 과정에서 오라클 데이터베이스의 버전을 이해하는 것은 매우 중요합니다. 이 문서에서는 Oracle 데이터베이스의 버전 정보를 쿼리하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다. 간단한 SQL 문을 실행하여 Oracle 데이터베이스에 있는 SQL 문의 데이터베이스 버전을 쿼리합니다.
