반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

.clone() 메소드 알아보기

2012. 8. 23. 05:25 | Posted by 솔웅


.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 하고 싶으면 withDataAndEvents parameter를 사용하면 됩니다.

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()이랑 같은 역할을 하는 것 같은데.

잠깐 봤더니 해당 부분에만 적용 된 효과를 전체 문서에 적용 되게끔 확장 해 주는 메소드인 것 같습니다. 나중에 따로 공부해 봐야 할 것 같습니다.


그 결과는 아래와 같습니다.




반응형

Comment

이전 1 2 3 4 5 6 다음