어떻게 $ (this)를 요소로 취급합니까? 내가 특정 요소에 적용하는 확장 기능을 짓고 있어요

Question

: 스크립트 태그에서

(function($){ 
    $.fn.extend({ 
     SomeFunction: function() { 
      var $this = $(this); 
     } 
    }); 
})(jQuery); 

, 나는 떨어질 것 :

$(document).ready(function(){ 
    $('.someclassname').SomeFunction(); 
}); 

이 내가 할 수 원하는 것을 제외하고 잘 작동 내 변수 선언에서 볼 수 있듯이 함수의 범위가 함수가 아닌 요소로 참조됩니다. 어떤 이유로 들어, 내가 좋아하는 일을 적용 할 수있는 요소처럼 치료 아니에요 :

var $this = $('.someclassname'); 

는 어떻게 프로그래밍 할 수 있습니다 : 그것은 작동하기 위해서는

$this.css('background','red'); 

, 나는 그것을 변경해야 확장 함수 그래서 $ this는 SomeFunction이 적용되는 요소를 참조합니까? 클래스 이름이 무엇인지 신경 쓰지 않을 것입니다.

감사합니다.

Answer 1

SomeFunction 내에서 this은 DOM 요소가 아니며 jQuery 인스턴스입니다. (플러그인은 이벤트 핸들러와 매우 다릅니다.)이 인스턴스에는 내부에 일치하는 DOM 요소가 하나 또는 여러 개있을 수 있습니다.

그래서 this.css("background", "red");이 작동합니다. 예 :

(function($){ 
    $.fn.extend({ 
     SomeFunction: function() { 
      this.css("background", "red"); 
     } 
    }); 
})(jQuery); 

Live Example | Live Source

당신의 목표는SomeFunction 외부 에서 세트를 사용하는 경우 (아마도 SomeFunction는 어떤 종류의 필터링은? 않습니다), 일반적으로 당신이 할 거라고 필터링을 수행하고 (필터링) 결과 jQuery 오브젝트를 반환하여 . (필터링되지 않은 경우 규칙은 this [전체 설정]을 반환하는 것입니다.) 예를 들면 그래서

, SomeFunction을 가정 텍스트 만 "kittens" 포함 된 요소를 반환하도록되어 그런 다음

(function($){ 
    $.fn.extend({ 
     SomeFunction: function() { 
      return this.filter(function() { 
       return $(this).text().indexOf("kittens") !== -1; 
      }); 
     } 
    }); 
})(jQuery); 

을 :

$(document).ready(function(){ 
    $('.someclassname').SomeFunction().css("background", "red"); 
}); 

은 "kittens" : Live Copy 텍스트가 포함 된 someclassname의 요소에만 영향을줍니다. Live Source