jQuery.wrapAll() 함수에 대한 자세한 설명-JS 튜토리얼-php.cn

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

巴扎黑

풀어 주다： 2017-06-24 13:43:40

원래의

1391명이 탐색했습니다.

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 객체일 수 있음).

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

참고: 래퍼가 다중 레벨 중첩 요소인 경우(예: "

"), 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]    


    [label#n4]

[span#n5]
[span#n6]

로그인 후 복사

다음은 래퍼 매개변수가 다중 레이어 중첩 요소인 jQuery 샘플 코드입니다.

<span id="n1">[span#n1]</span>
<label id="n2">[label#n2]</label>
<span id="n3">[span#n3]</span>
<!--以上是执行jQuery代码前的html内容-->
<script type="text/javascript">
// 在所有span元素外包裹嵌套的div元素：<div><p><em>{#n1}{#n3}</em></p></div>
// 所有span元素都会移动到第一个span元素的位置
$("span").wrapAll( &#39;<div><p><em></em></p></div>&#39; );
/*
如果参数为&#39;<div><p> <em></em></p></div>&#39;，由于&#39;<p>&#39;的第一个子节点是空格(文本节点)，因此停止向内层查找，直接在p元素内部的末尾位置插入所有的span元素：<div><p> <em></em>{#n1}{#n3}</p></div>
 */
</script>
<!--以上是执行jQuery代码后的html内容-->
<div><p><em><span id="n1">[span#n1]</span><span id="n3">[span#n3]</span></em></p></div>
<label id="n2">[label#n2]</label>

로그인 후 복사

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