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

wrapInner() 함수는 일치하는 각 요소의 모든 하위 노드 외부에서 지정된 HTML 구조를 래핑하는 데 사용됩니다.

여기의 모든 하위 노드에는 텍스트 노드, 주석 노드 및 기타 유형의 노드가 포함됩니다.

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

Syntax

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

jQueryObject.wrapInner( 래퍼 )

Parameters

매개변수 설명

wrapper 일치하는 요소를 래핑하는 데 사용되는 문자열/요소/jQuery/함수 유형 노드입니다.

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

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

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

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

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

반환 값

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

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

예제 및 설명

wrapInner() 함수는 일치하는 각 요소의 모든 콘텐츠 외부에서 지정된 요소를 래핑하는 데 사용됩니다.

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>
<script type="text/javascript">
$("p").wrapInner( &#39;<em></em>&#39; ); 
</script>
<!--以下是jQuery代码执行后的html内容-->
<p><em>段落文本1<span></span></em></p>
<p><em>段落文本2<span></span></em></p>

다음 HTML 코드(원본 HTML 코드)를 참조하세요.

<p id="n1">
    <span id="n2">foo</span>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
    <span id="n5">bar</span>
</p>
接着，我们为每个<p>元素的所有子节点外部包裹<strong>元素
// 为每个p元素的所有子节点外部包裹strong元素
$("p").wrapInner( &#39;<strong />&#39; );

wrapperInner()는 추가 공백 문자를 추가하지 않고 여는 태그 뒤, 각 e388a4556c0f65e1904146cc1a846bee 요소의 닫는 태그 앞에 래핑 요소의 여는 태그와 닫는 태그를 삽입합니다. 다음은 위 jQuery 코드를 실행한 후의 html 콘텐츠입니다(형식은 조정되지 않았습니다).

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

다음으로 원본 HTML 코드를 예로 들어 매개변수 래퍼를 사용자 정의 함수로 설정합니다. jQuery 코드는 다음과 같습니다.

// 为每个span元素的所有子节点外部包裹em元素，em元素的class属性等于span元素的文本内容
$("span").wrapInner( function(i){
    return &#39;<em class="&#39; + $(this).text() + &#39;"></em>&#39;;      
} );

다음은 jQuery 코드 실행 후의 html 콘텐츠입니다(형식은 조정하지 않았습니다).

<p id="n1">
    <span id="n2"><em class="foo">foo</em></span>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
    <span id="n5"><em class="bar">bar</em></span>
</p>

원본 HTML 코드를 예로 들면, 다음은 매개변수 래퍼가 있는 jQuery 코드입니다. 다층 중첩 요소:

// 为每个span元素的所有子节点外部包裹em元素：<em><b><i>{span.childNodes}</i></b></em>
$("span").wrapInner( &#39;<em><b><i></i></b></em>&#39; );
/*
如果参数为&#39;<em><b> <i></i></b></em>&#39;，由于&#39;<b>&#39;的第一个子节点是空格(文本节点)，因此停止向内层查找，直接在b元素内部的末尾位置插入所有的span元素：<em><b> <i></i>{span.childNodes}</b></em>
 */

다음은 위에서 실행되는 jQuery 코드입니다. 다음 HTML 콘텐츠:

<p id="n1">
    <span id="n2"><em><b><i>foo</i></b></em></span>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
    <span id="n5"><em><b><i>bar</i></b></em></span>
</p>

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