Unexpected scope for $(this) in jQuery using each and function

Question

When i execute the following code, i'd expect the same element id to be alerted twice but instead, the first one is correct while the second always show the name of the first element in the set.

$("div.someClass").each(function (index) {
  $(this).click(function () {
    alert($(this).attr("id")); // Here i get the actually clicked element
    $.when($("div.someClass").animate({ }, 0)).then(function () {
      alert($(this).attr("id")); // Here i get the first element in of that class
    });
  });
});

Why is it so? How to resolve it? I have tried passing the name of the element into the function but it didn't work.

Answer 1

Save the $(this) in some variable for instance that and later use in animate

$("div.someClass").each(function (index) {
  $(this).click(function () {
    alert($(this).attr("id")); // Here i get the actually clicked element
    var that = $(this);
    $.when($("div.someClass").animate({ }, 0)).then(function () {           
      alert(that.attr("id")); // Here i get the first element in of that class
      alert($(this).attr("id")); 
    });
  });
});

Answer 2

The value of this is automatically altered on every function call. So, unless multiple function calls conspire to purposely preserve a particular value of this by passing it in and then using .apply() or .call() to set it before calling your callback, it will be different. Javascript goes by these rules:

• If you make a method call, the value of this is set to the object whose method it is.
• If you make a normal function call, this is set to the global object (normally window).
• If you use fn.apply() or fn.call(), then this is set based on the first argument.

The simplest solution is to save the value of this in a local variable and then refer to that.

$("div.someClass").each(function (index) {
  var self = $(this);
  self.click(function () {
    alert(self.attr("id")); // Here i get the actually clicked element
    $.when($("div.someClass").animate({ }, 0)).then(function () {
      alert(self.attr("id")); // Here i get the first element in of that class
    });
  });
});