.clone()
.clone()은 말그대로 복제 해 놓는 겁니다.
<div class="container"> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> </div>
이 코드를 가지고 아래 처럼 표현하면
$('.hello').appendTo('.goodbye');
그 결과는
<div class="container"> <div class="goodbye"> Goodbye <div class="hello">Hello</div> </div> </div>
이렇게 나올 겁니다.
hello 클래스를 goodbye 클래서 다음에 appendTo 했으니까요.
그런데 Hello를 그대로 유지하면서 goodbye 클래스 다음에 hello 클래스를 다시 넣고 싶을
때 clone()을 쓰시면 됩니다.
$('.hello').clone().appendTo('.goodbye');
이렇게 하면 .hello 클래스의 복제를 만들어서 goodbye 클래스의 뒤에 appendTo를 할 겁니다.
그 결과는 아래와 같겠죠.<div class="container"> <div class="hello">Hello</div> <div class="goodbye"> Goodbye <div class="hello">Hello</div> </div> </div>
이벤트 핸들러까지 clone 하고 싶으면withDataAndEventsparameter를 사용하면 됩니다.
var $elem = $('#elem').data( "arr": [ 1 ] ), // Original element with attached data $clone = $elem.clone( true ) .data( "arr", $.extend( [], $elem.data("arr") ) ); // Deep copy to prevent data sharing
예제파일을 보죠.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<b>Hello</b><p>, how are you?</p>
<script>
$("b").clone().prependTo("p");
</script>
</body>
</html>b 태그에 있는 내용을 복제해서 p 태그에 붙입니다.
그러면
Hello
Hello, how are you?
이렇게 나옵니다. Hello 가 앞에 나온건 appendTo가 아니라 prependTo를 했기 때문이죠.
<!DOCTYPE html>
<html>
<head>
<style>
#orig, #copy, #copy-correct {
float: left;
width: 20%;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="orig">
<div class="elem"><a>1</a></div>
<div class="elem"><a>2</a></div>
<div class="elem"><a>3</a></div>
<div class="elem"><a>4</a></div>
<div class="elem"><a>5</a></div>
</div>
<div id="copy"></div>
<div id="copy-correct"></div>
<script>
// sort order is not guaranteed here and may vary with browser
$('#copy').append($('#orig .elem')
.clone()
.children('a')
.prepend('foo - ')
.parent()
.clone());
// correct way to approach where order is maintained
$('#copy-correct')
.append($('#orig .elem')
.clone()
.children('a')
.prepend('bar - ')
.end());
</script>
</body>
</html>두번째 예제의 스크립트 부분을 보면 id 가 copy 인 곳 (#copy)에 뭔가를 append 하네요.
바로 그 전에 있던 id 가 orig인 곳 내의 elem 클래스들인데요. 이것을 clone() 했습니다.
그리고 children()으로 그 안의 a 부분을 찾고 그 앞에 foo - 를 넣습니다.
그 다음 parent().clone()은 뭘까요. 그 parent 의 값을 받아서 clone을 하는 것 같습니다.
그러면 div 까지 clone 이 되서 줄 바꿈 효과까지 나오게 됩니다.
두번째는 id가 copy-correct 인 곳에 id가 orig인 것의 elem 클래스를 append 하는데요.
그것을 clone 하고 children 중에 a 를 찾은 다음에 앞에 bar - 를 붙이네요. 그리고 끝입니다.
.end()는 어떤 역할을 할까요. 위에 있었던 .parent().clone()이랑 같은 역할을 하는 것 같은데.
잠깐 봤더니 해당 부분에만 적용 된 효과를 전체 문서에 적용 되게끔 확장 해 주는 메소드인 것 같습니다. 나중에 따로 공부해 봐야 할 것 같습니다.
그 결과는 아래와 같습니다.
'jQuery Mobile > jQuery API' 카테고리의 다른 글
| 우아하게 화면 scroll 하기 (0) | 2012.12.20 |
|---|---|
| .find() 메소드 알아보기 (0) | 2012.08.23 |
| .delegate() 메소드 알아보기 (0) | 2012.08.23 |
| jQuery API 몇개 훑어보기 .html(), .text(), .bind() (0) | 2012.08.10 |
| jQuery API .live() 공부하기 (2) | 2012.08.09 |