Jquery $().each method obscures 'this' keyword

Question

I am creating a Javascript object that contains a function that executes a jQuery each method like the following:

function MyClass {

  Method1 = function(obj) { 
    // Does something here
  }

  Method2 = function() {
    $(".SomeClass").each(function() {

       // 1          2
       this.Method1(this);

    });
  }

}

Which object is each THIS referring to? jQuery is referring to the item returned from the each iteration. However, I would like This[1] to refer to the containing class...

How can I refer to the containing class from within the jQuery loop?

Answer 1

I guess you could do something like this:

function MyClass {
     Method1 = function(obj) {
         //do something here
     } 

     Method2 = function () {
          var containingClass = this;
          $(".SomeClass").each(function () {
             containingClass.Method1(this);
           });
        }
    }
}

Answer 2

From http://docs.jquery.com/Core/each:

This means that every time the passed-in function is executed (which is once for every element matched) the 'this' keyword points to the specific DOM element. Note that 'this' does not point to a jQuery object.

Personally, I prefer using explicit parameters. This way, it is more easily readable:

$('#rotfl').each(function(index, domObject)
{
   var jQueryObject = $(domObject);
   // code
});

To answer your question: JavaScript has dynamic static scope. You can do the following:

var that = this;
$('#rotfl').each(function(index, domObject)
{
   var jQueryObject = $(domObject);
   that.DoSomething();
   // code
});