issues with 'this' when using within jquery code block

Question

I want to use values of the calling object within the jquery code block, but 'this' is mapped to the jquery object and not eh caller! How to solve this PLEASE?

// class
myClass = function (){
    // member object
    this._localVars = {
        _elementClass:'.elem-class',
        _dots:null,
        _dotStatus:null
    };

    // member function
    this.func1 = function() {
        $(this._elementClass).each(function(_index, _element){
            // this._localVars._dots[_index] = _element; ... this line throws an error 'this._localVars' is undefined ... as 'this' is html element here and not an object of the calling class
        });
    };
};

Please suggest how can I use the 'this' inside the jquery code block to refer the variables/objects of the class and not HTML/jQuery.

Thanks

Answer 1

Try saving this object into a local variable

    var myObject = this;
    $(this._elementClass).each(function(_index, _element){
        myObject._localVars._dots[_index] = _element;
    });

Answer 2

You can use the jQuery.proxy method to set the value of this that you want.

You pass your function as the first parameter, and the current this as the second.

myClass = function (){
    this._localVars = {
        _elementClass:'.elem-class',
        _dots:[],
        _dotStatus:null
    };
    this.func1 = function() {
        $(this._localVars._elementClass).each( $.proxy(function(_index, _element) {
             this._localVars._dots[_index] = _element;
        }, this));
    };
};

var cl = new myClass();

cl.func1();

console.log(cl._localVars._dots);