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( '<!--插入到p元素之后的位置-->' ); </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('<span id="n6">span#n6(new)</span>'); // 在n2之后插入n5 // n5将从原位置上消失 $("#n2").after( document.getElementById("n5") ); // 在每个span元素之后插入自定义的strong元素 $("span").after( function(index, innerHTML){ return '<strong>strong元素' + (index + 1) + '</strong>'; } );
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!