>  기사  >  웹 프론트엔드  >  jQuery.wrapAll() 함수 사용법에 대한 자세한 설명

jQuery.wrapAll() 함수 사용법에 대한 자세한 설명

巴扎黑
巴扎黑원래의
2017-06-24 13:59:331503검색

wrapAll() 함수는 일치하는 모든 요소를 ​​단일 요소로 래핑하는 데 사용됩니다.

이 함수는 jQuery 개체(인스턴스)에 속합니다.

Syntax

이 함수는 jQuery 1.2의 새로운 기능입니다.

jQueryObject.wrapAll( 래퍼 )

매개변수

매개변수 설명

wrapper String/Element/jQuery/Function 유형 일치하는 요소를 래핑하는 데 사용되는 노드입니다.

매개변수 래퍼가 string인 경우 jQuery 선택기 또는 html 문자열로 간주되며 jQuery가 자체적으로 판단합니다.

래퍼가 함수 유형이 아닌 경우, WrapAll()은 일치하는 모든 요소를 ​​첫 번째 일치 요소의 위치로 이동한 다음 지정된 단일 요소로 모두 래핑합니다.

jQuery 1.4의 새로운 지원: 매개변수 래퍼는 함수일 수 있습니다. WrapAll()은 일치하는 모든 요소를 ​​기반으로 이 함수를 탐색하고 실행하며, 함수의 this는 해당 DOM 요소를 가리킵니다.

wrapAll()은 또한 일치하는 요소에 있는 현재 요소의 index인 매개변수를 함수에 전달합니다. function의 반환 값은 래핑에 사용되는 노드 콘텐츠입니다(html 문자열, DOM 요소 또는 jQuery 객체일 수 있음).

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

참고: 래퍼가 다중 레벨 중첩 요소인 경우(예: "e388a4556c0f65e1904146cc1a846bee5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e694b3e26ee717c64999d7867364b1b4a3"), WrapAll()은 외부 in. 첫 번째 노드. 노드에 자식 노드가 없거나 첫 번째 자식 노드가 Element 노드(예: 텍스트 노드, 주석 노드 등)가 아닌 경우 내부 검색을 중지하고 현재 일치하는 요소를 내부 끝 위치에 직접 추가(append())합니다. 현재 노드.

반환 값

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

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

예제 및 설명

wrapAll() 함수는 일치하는 모든 요소를 ​​단일 요소로 래핑하는 데 사용됩니다.

<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>

다음 HTML 코드를 예로 들어보세요.

<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>

다음 jQuery 샘플 코드는 WrapAll( ) 기능 구체적인 사용법:

// 在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;);

코드 실행(실행하려면 데모 페이지에 다른 코드를 복사하세요)

wrapAll()은 추가하지 않고 일치하는 모든 요소의 양쪽에 래핑된 요소의 시작 태그와 끝 태그를 배치합니다. 추가 공백 문자가 있는 경우 위 코드를 실행한 후의 전체 HTML 코드는 다음과 같습니다(형식은 조정되지 않았습니다).

<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>

다음은 매개변수 래퍼가 함수인 jQuery 샘플 코드입니다.

<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]

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

[span#n1][span#n3]

위 내용은 jQuery.wrapAll() 함수 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.