테스트 사이트 - 개발 중인 베타 버전입니다
SIR

.clone( [withDataAndEvents ] )

수다왕
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 8년 전 · 1688

.clone( [withDataAndEvents ] )


설명 : 일치하는 요소 집합의 전체 복사본을 만듭니다.


.clone()방법은 수행 깊은 그것을 복사하는 일치하는 요소뿐만 아니라 그들의 자손 요소와 텍스트 노드를 모두 같은 의미 일치하는 요소의 세트의 사본을.


참고 : 성능상의 이유로 특정 양식 요소 (예 : 사용자 데이터 입력 textarea및 사용자 선택 사항 )의 동적 상태 select는 복제 된 요소로 복사되지 않습니다. input요소를 복제 할 때 요소의 동적 상태 (예 : 텍스트 입력에 입력 된 사용자 데이터 및 확인란에 대한 사용자 선택)는 복제 된 요소에 유지됩니다.


삽입 메소드 중 하나와 함께 사용 .clone()하면 페이지의 요소를 복제하는 편리한 방법입니다. 다음 HTML을 고려하십시오.


<div class="container">

  <div class="hello">Hello</div>

  <div class="goodbye">Goodbye</div>

</div>


토론에서 볼 수 있듯이 .append()일반적으로 요소가 DOM 어딘가에 삽입되면 이전 위치에서 이동됩니다. 그래서, 코드가 주어진다 :


$( ".hello" ).appendTo( ".goodbye" );

결과 DOM 구조는 다음과 같습니다.

<div class="container">

  <div class="goodbye">

    Goodbye

    <div class="hello">Hello</div>

  </div>

</div>



이를 방지하고 요소 사본을 작성하려면 다음을 작성할 수 있습니다.


<div class="container">

  <div class="hello">Hello</div>

  <div class="goodbye">

    Goodbye

    <div class="hello">Hello</div>

  </div>

</div>


참고 : 이 .clone()메서드를 사용할 때 복제 된 요소 나 내용을 문서에 다시 삽입하기 전에 수정할 수 있습니다.


일반적으로 원본 요소에 바인딩 된 모든 이벤트 핸들러 는 복제본으로 복사 되지 않습니다 . 선택적 withDataAndEvents매개 변수를 사용하면이 동작을 변경하고 대신 요소의 새 복사본에 바인딩 된 모든 이벤트 처리기의 복사본을 만들 수 있습니다. jQuery 1.4에서, .data()메소드 에 의해 첨부 된 모든 요소 데이터 도 새 사본에 복사됩니다.


그러나 요소 데이터 내의 객체와 배열은 복사되지 않고 복제 된 요소와 원본 요소간에 계속 공유됩니다. 모든 데이터를 완전 복사하려면 각 데이터를 수동으로 복사하십시오.


// Original element with attached data

var $elem = $( "#elem" ).data( "arr", [ 1 ] ),

    $clone = $elem.clone( true )

      // Deep copy to prevent data sharing

      .data( "arr", $.extend( [], $elem.data( "arr" ) ) );

 

 

jQuery 1.5부터 withDataAndEvents선택적으로 deepWithDataAndEvents 복제 된 요소의 모든 하위에 대한 이벤트 및 데이터를 복사 할 수 있습니다 .


주 : 사용 .clone()에는 id고유 한 것으로 간주되는 중복 속성이있는 요소를 생성하는 부작용 이 있습니다. 가능한 경우이 속성을 사용하여 요소를 복제하거나 class속성을 식별자로 사용하지 않는 것이 좋습니다 .



예:

모든 b 요소를 복제하고 (복제본을 선택) 모든 단락 앞에 추가합니다.

 

 

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>clone demo</title>

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>

 

<b>Hello</b><p>, how are you?</p>

 

<script>

$( "b" ).clone().prependTo( "p" );

</script>

 

</body>

</html>  



목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
15819
jQuery 제이쿼리 jQuery( ":button" )
15818
jQuery 제이쿼리 .bind( eventType [, eventData ], handler )
15817
jQuery 제이쿼리 .before(content [,content])
15816
jQuery 제이쿼리 Attribute Starts With Selector [name^=”value”]
15815
jQuery 제이쿼리 Attribute Not Equal Selector [name!=”value”]
15814
jQuery 제이쿼리 Attribute Equals Selector [name=”value”]
15813
jQuery 제이쿼리 Attribute Ends With Selector [name$=”value”]
15812
jQuery 제이쿼리 Attribute Contains Word Selector [name~=”value”]
15811
jQuery 제이쿼리 Attribute Contains Selector [name*=”value”]
15810
jQuery 제이쿼리 attributeContainsPrefix selector
15809
jQuery 제이쿼리 .attr (attributeName)
15808
jQuery 제이쿼리 .appendTo( target )
15807
jQuery .append (content [, content])
15806
jQuery animated selector
15805
jQuery .animate (properties [, duration] [, easing] [, complete])
15804
jQuery 제이쿼리 andSelf()
15803
jQuery 제이쿼리 all selector
15802
jQuery 제이쿼리 .ajaxSuccess(handler)
15801
jQuery .ajaxStop(handler )
15800
jQuery .ajaxStart(handler )
15799
jQuery .ajaxSend (handler )
15798
jQuery 제이쿼리 .ajaxError (handler)
15797
jQuery 제이쿼리 .ajaxComplete (handler)
15796
jQuery 제이쿼리 .after()
15792
PHP 제이쿼리 .addClass ()
15791
jQuery 제이쿼리 .addBack ()
15790
jQuery 제이쿼리 .add (selector)
15789
PHP is_null - 변수가 있는지 여부를 찾습니다.NULL
15788
PHP is_iterable - 변수의 내용이 반복 가능한 값인지 확인합니다.
15787
PHP is_int - 변수의 타입이 정수인지 찾기
이전 다음
전체 목록