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

.clone( [withDataAndEvents ] )

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

.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>  



목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
15854
jQuery deferred.catch( failFilter )
15853
jQuery deferred.always (alwaysCallbacks [, alwaysCallbacks])
15852
jQuery .dblclick (handler)
15851
jQuery 제이쿼리 .data()
15849
jQuery .css (propertyName)
15848
jQuery .contextmenu( handler )
15847
jQuery .contents()
15843
PHP php 구글 OTP 연동 테스트 하던 자료 9
15842
jQuery jQuery ( ": contains (text)")
15841
jQuery .closest (selector)
15840
jQuery .clone( [withDataAndEvents ] ) 현재글
15839
jQuery 제이쿼리 .click( handler )
15838
jQuery 제이쿼리 .clearQueue ([queueName])
15837
jQuery 제이쿼리 jQuery( ".class" )
15836
jQuery 제이쿼리 .children ([selector])
15835
jQuery 제이쿼리 jQuery ( ": checkbox")
15834
jQuery 제이쿼리 .change( handler )
15833
jQuery 제이쿼리 callbacks.remove( callbacks )
15832
jQuery 제이쿼리 callbacks.locked ()
15831
jQuery 제이쿼리 callbacks.lock()
15830
jQuery 제이쿼리 callbacks.has ([callback])
15829
jQuery 제이쿼리 callbacks.fireWith ([context] [, args])
15828
jQuery 제이쿼리 callbacks.fired()
15826
jQuery 제이쿼리 callbacks.fire (arguments)
15825
jQuery 제이쿼리 callbacks.fire (arguments)
15824
jQuery 제이쿼리 callbacks.empty()
15823
PHP rsa 암호화 클래스
15822
jQuery 제이쿼리 callbacks.disable ()
15821
jQuery 제이쿼리 callbacks.add( callbacks )
15820
jQuery 제이쿼리 .blur( handler )
이전 다음
전체 목록