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

after() 함수는 일치하는 각 요소 뒤에 지정된 내용을 삽입하는 데 사용됩니다.

지정된 콘텐츠는 htmlstring, DOM 요소(또는 배열), jQuery 객체, 함수(반환 값)일 수 있습니다.

이 함수의 반대는 before() 함수로, 일치하는 각 요소 앞에 지정된 내용을 삽입하는 데 사용됩니다.

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

Syntax

jQueryObject.after( content1 [, content2 [, contentN ]] )

Parameters

매개변수 설명

content1 문자열/요소/jQuery/함수 유형으로 지정되는 추가 콘텐츠입니다.

content2 Optional/String/Element/jQuery 유형이 추가 콘텐츠를 지정했습니다.

contentN Optional/String/Element/jQuery 유형이 추가 콘텐츠를 지정했으며 개수에는 제한이 없습니다.

after()는 여러 매개변수로 표시되는 모든 내용을 일치하는 각 요소 바로 뒤의 위치에 삽입할 수 있습니다. 매개변수가 문자열 유형인 경우 html 문자열로 처리됩니다.

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

after()는 함수에 두 개의 매개변수도 전달합니다. 첫 번째 매개변수는 일치하는 요소에 있는 현재 요소의 인덱스이고 두 번째 매개변수는 요소의 현재 내부 HTML 콘텐츠(innerHTML)입니다. 함수의 반환 값은 삽입해야 하는 콘텐츠입니다(html 문자열, DOM 요소 또는 jQuery 객체일 수 있음).

참고: 첫 번째 매개변수만 순회 실행에 사용되는 사용자 정의 함수일 수 있습니다. 후속 매개변수도 함수인 경우 해당 toString() 메서드가 호출되어 문자열로 변환되고 html 콘텐츠로 처리됩니다.

반환 값

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

참고: 삽입된 콘텐츠가 현재 페이지의 일부 요소인 경우 해당 요소는 원래 위치에서 사라집니다. 간단히 말해서 이는 복사 작업이 아닌 이동 작업에 해당합니다.

예제 및 설명

after() 함수는 일치하는 각 요소 뒤에 콘텐츠를 삽입하는 데 사용됩니다.

<p>段落文本1<span></span></p><!--插入到p元素之后的位置-->
<p>段落文本2<span></span></p><!--插入到p元素之后的位置-->
<script type="text/javascript">
$("p").after( &#39;<!--插入到p元素之后的位置-->&#39; ); 
</script>

after() 함수와 insertAfter() 함수의 차이점에 유의하세요.

var $A = $("s1");
var $B = $("s2");
// 将$B插入到$A之后
$A.after( $B ); // 返回$A
// 将$A插入到$B之后
$A.insertAfter( $B ); // 返回表示插入内容的jQuery对象( 匹配所有$B之后插入的$A元素 )

다음 HTML 코드 예:

<p id="n1">
    <span id="n2">span#n2</span>    
</p>
<p id="n3">
    <label id="n4">label#n4</label>
    <i id="n5">i#n5</i>
</p>

다음 jQuery 샘플 코드는 after() 함수의 구체적인 사용법을 보여주는 데 사용됩니다.

// 在n4之后插入一个自定义的span元素
$("#n4").after(&#39;<span id="n6">span#n6(new)</span>&#39;);
// 在n2之后插入n5
// n5将从原位置上消失
$("#n2").after( document.getElementById("n5") );
// 在每个span元素之后插入自定义的strong元素
$("span").after( function(index, innerHTML){
    return &#39;<strong>strong元素&#39; + (index + 1) + &#39;</strong>&#39;;
} );

after()는 위의 추가 공백 문자를 추가하지 않고 지정된 요소의 닫는 태그 뒤에 내용을 삽입합니다. 코드가 실행됩니다. 전체 HTML 코드는 다음과 같습니다(형식은 어떤 방식으로도 조정되지 않았습니다):

<p id="n1">
    <span id="n2">span#n2</span><strong>strong元素1</strong><i id="n5">i#n5</i>    
</p>
<p id="n3">
    <label id="n4">label#n4</label><span id="n6">span#n6(new)</span><strong>strong元素2</strong>
    
</p>

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