.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>
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 4736 | jQuery | 8년 전 | 1568 | ||
| 4735 | jQuery | 8년 전 | 1760 | ||
| 4734 | jQuery | 8년 전 | 1746 | ||
| 4733 | jQuery | 8년 전 | 2043 | ||
| 4732 | jQuery | 8년 전 | 1963 | ||
| 4731 | jQuery | 8년 전 | 1466 | ||
| 4730 | jQuery | 8년 전 | 1924 | ||
| 4729 | PHP |
 terrorboy |
8년 전 | 6911 | |
| 4728 | jQuery | 8년 전 | 2566 | ||
| 4727 | jQuery | 8년 전 | 1616 | ||
| 4726 | jQuery | 8년 전 | 1697 | ||
| 4725 | jQuery | 8년 전 | 1838 | ||
| 4724 | jQuery | 8년 전 | 1318 | ||
| 4723 | jQuery | 8년 전 | 1870 | ||
| 4722 | jQuery | 8년 전 | 1634 | ||
| 4721 | jQuery | 8년 전 | 1925 | ||
| 4720 | jQuery | 8년 전 | 1985 | ||
| 4719 | jQuery | 8년 전 | 1607 | ||
| 4718 | jQuery | 8년 전 | 1615 | ||
| 4717 | jQuery | 8년 전 | 1567 | ||
| 4716 | jQuery | 8년 전 | 1244 | ||
| 4715 | jQuery | 8년 전 | 1403 | ||
| 4714 | jQuery | 8년 전 | 1425 | ||
| 4713 | jQuery | 8년 전 | 1344 | ||
| 4712 | jQuery | 8년 전 | 2235 | ||
| 4711 | jQuery | 8년 전 | 1723 | ||
| 4710 | PHP |
terrorboy |
8년 전 | 3756 | |
| 4709 | jQuery | 8년 전 | 1638 | ||
| 4708 | jQuery | 8년 전 | 1917 | ||
| 4707 | jQuery | 8년 전 | 1774 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기