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")); 
    });
  });
});