.clone( [withDataAndEvents ] ) 정보
jQuery .clone( [withDataAndEvents ] )본문
.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>
0
댓글 0개