[jQuery] each 루프에서의 this의 포인터에 대해서.

1. $(셀렉).each(function(){
2.     //루프돌기
3. });

 

이런 구문을 많이 쓴다. 특히나 플러그인 제작시

 

1. var public = {
2.     fn : function(){
3.         return this.each(function(){
4.             //메소드
5.         });
6.     }//END fn
7. };

 

이런식으로 오브젝트 포인터에 대해서 return을 해주는데, 여기서 this와 $(this)의 사용이 매번 헷갈린다.

더욱이! public.fn.call(this); 라고 콜을 하는 순간! this에 대한 포인터는 안드로메다로 빠져버린다~~~ 쓩!~

 

애매한건 딱 정리해서 적어둬야겠다.

 

결론은!

each 루프 내에서 this의 포인터는 jQuery 오브젝트가 아닌 DOM 오브젝트이다.

때문에 each내에서 jQuery의 메소드를 사용하고 싶다면,

$(this)로 jQuery오브젝드로 콜을 해야 한다.

 

간단한 예로,

 

1. (function($){
2.     var public = {
3.         init : function(options){
4.             var opt = $.extend({set:1}, options);
5.             return this.each(function(){
6.                 // each 루프
7.                 // this는 DOM 오브젝트
8.                 // $(this)가 jQuery 오브젝트
9.                 this.hide() // ERROR!!
10.                 $(this).hide() // GOOD~
11.             };
12.         } //END init()
13.     }; //END public
14.     $.fn.plugin = function(method){
15.         return public.init.apply(this, arguments);
16.     };//END plugin
17. })(jQuery);

 

이렇게 플러그인을 만들때,

최초 $.fn.plugin에서의 this는 jQuery객체 즉, $(this)를 의미한다. 그래서 jQuery의 메소드들을 사용할 수 있다.

플러그인에서 public.init.apply를 이용해 this로 콜을 했으니 this를 받은 public.init() 에서 this는 다시금 $(this)가 된다.

그래서 this.each() 와 같은 jQuery메서드를 쓸 수 있는데,

이제 each안으로 들어오면 this는 DOM오브젝트가 된다. 그래서 여기서는 this가 jQuery의 메서드를 못쓴다.

 

 

한가지 팁은 DOM객체, 여기선 HTMLElement 객체의 기본 속성값은 jQuery 객체로 변환해 사용하는 것보단, 그냥 그 자체로 사용하는게 더 빠르다. 때문에 id값이나 offset, title등의 기본 속성값은 $(this).attr(‘id’)가 아닌 this.id 등으로 사용 해 주자.

 

출처:http://asrahi.me/20194512596

---

jQuery .each() Syntax

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

//DOM ELEMENTS $("div").each(function(index, value) {     console.log('div' + index + ':' + $(this).attr('id')); }); //outputs the ids of every div on the web page //ie - div1:header, div2:body, div3:footer   //ARRAYS var arr = [ "one", "two", "three", "four", "five" ]; jQuery.each(arr, function(index, value) {        console.log(this);        return (this != "three"); // will stop running after "three"    }); //outputs: one two three   //OBJECTS var obj = { one:1, two:2, three:3, four:4, five:5 };     jQuery.each(obj, function(i, val) {        console.log(val);     }); //outputs: 1 2 3 4 5