before() 함수는 일치하는 각 요소 앞에 지정된 내용을 삽입하는 데 사용됩니다.
지정된 콘텐츠는 htmlstring, DOM 요소(또는 배열), jQuery 객체, 함수(반환 값)일 수 있습니다.
이 함수의 반대는 after() 함수로, 일치하는 각 요소 뒤에 지정된 내용을 삽입하는 데 사용됩니다.
이 함수는 jQuery 객체(인스턴스)에 속합니다.
Syntax
jQueryObject.before( content1 [, content2 [, contentN ]] )
Parameters
매개변수 설명
content1 추가 콘텐츠는 문자열/요소/jQuery/함수 유형으로 지정됩니다.
content2 Optional/String/Element/jQuery 유형이 추가 콘텐츠를 지정했습니다.
contentN Optional/String/Element/jQuery 유형이 추가 콘텐츠를 지정했으며 개수에는 제한이 없습니다.
before()는 여러 매개변수로 표시되는 모든 내용을 일치하는 각 요소 바로 앞 위치에 삽입할 수 있습니다. 매개변수가 문자열 유형인 경우 html 문자열로 처리됩니다.
jQuery 1.4의 새로운 지원: 매개변수 content1은 함수일 수 있습니다. before()는 일치하는 모든 요소를 기반으로 함수를 순회하고 실행하며, 함수의 this는 해당 DOM 요소를 가리킵니다.
before()는 함수에 두 개의 매개변수도 전달합니다. 첫 번째 매개변수는 일치하는 요소에 있는 현재 요소의 인덱스이고 두 번째 매개변수는 요소의 현재 내부 HTML 콘텐츠(innerHTML)입니다. 함수의 반환 값은 삽입해야 하는 콘텐츠입니다(html 문자열, DOM 요소 또는 jQuery 객체일 수 있음).
참고: 첫 번째 매개변수만 순회 실행에 사용되는 사용자 정의 함수일 수 있습니다. 후속 매개변수도 함수인 경우 해당 toString() 메서드가 호출되어 문자열로 변환되고 html 콘텐츠로 처리됩니다.
반환 값
before() 함수의 반환 값은 jQuery 유형으로, 현재 jQuery 개체 자체를 반환합니다(체인 스타일 프로그래밍을 용이하게 하기 위해).
참고: 삽입된 콘텐츠가 현재 페이지의 일부 요소인 경우 해당 요소는 원래 위치에서 사라집니다. 간단히 말해서 이는 복사 작업이 아닌 이동 작업에 해당합니다.
예제 및 설명
before() 함수는 일치하는 각 요소 앞에 콘텐츠를 삽입하는 데 사용됩니다.
<!--插入到p元素之前的位置--><p>段落文本1<span></span></p> <!--插入到p元素之前的位置--><p>段落文本2<span></span></p> <script type="text/javascript"> $("p").before( '<!--插入到p元素之前的位置-->' ); </script>
before() 함수와 insertBefore() 함수의 차이점에 유의하세요.
var $A = $("s1"); var $B = $("s2"); // 将$B插入到$A之前 $A.before( $B ); // 返回$A // 将$A插入到$B之前 $A.insertBefore( $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 샘플 코드는 before() 함수의 구체적인 사용법을 보여주는 데 사용됩니다.
//在n4之前插入一个自定义的span元素 $("#n4").before('<span id="n6">span#n6(new)</span>'); // 在n2之前插入n5 // n5将从原位置上消失 $("#n2").before( document.getElementById("n5") ); // 在每个span元素之前插入自定义的strong元素 $("span").before( function(index, innerHTML){ return '<strong>strong元素' + (index + 1) + '</strong>'; } );
before()는 위 코드 뒤에 추가 공백 문자를 추가하지 않고 지정된 요소의 여는 태그 앞에 내용을 삽입합니다. 실행됩니다. 전체 HTML 코드는 다음과 같습니다(형식은 어떤 방식으로도 조정되지 않았습니다):
<p id="n1"> <i id="n5">i#n5</i><strong>strong元素1</strong><span id="n2">span#n2</span> </p> <p id="n3"> <strong>strong元素2</strong><span id="n6">span#n6(new)</span><label id="n4">label#n4</label> </p>
위 내용은 jQuery.before() 함수에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!