How can I refer to the parent element once inside another function?

Question

I'm still getting used to ES6 (not that I was an expert in ES5) and the concept of promises is kind of killing me.

(Sorry in advanced that I can't use JSFiddle from my work.)

I have an event listener that, on click, is retrieving a web page (HTML). I'm utilizing jQuery's ajax method to do the pull. My goal is to change the style (color for now) upon looking up a value in the pulled web page.

$("a").each(function(index) {
  this.addEventListener("click", function(evt) {
    $.ajax(this.href)
      .done(function(html) {
        var int1 = parseInt($($.parseHTML(html)).find("int1").text());
        if (int1 > 0) {
          this.style.color = "blue";  // this 'this' doesn't refer to the anchor.  It refers to the function I think
        }
      }
    });
  });
});

(I think I closed all of the brackets)

I've tried doing .then() after the .done() but I run into the same problem.

Is there a way to refer to anchor that initiated the ajax call from within the done function or is there a better way to do this?

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Taplar, May 02 '19 at 19:52
It should also be noted that the usage of `addEventListener` here is unnecessary. `on()` inheriently binds the event listener to all elements in the result stack. — Taplar, May 02 '19 at 19:55

score 0 · Answer 1 · answered May 02 '19 at 20:02

There are two ways to do what you want:

First way is buffering, this way you are setting an outer scope variable (buffer) which is accessible from the inner scope.

$("a").each(function(index) {
  this.addEventListener("click", function(evt) {
    var that = evt.target; // or "this"
    $.ajax(this.href)
      .done(function(html) {
        var int1 = parseInt($($.parseHTML(html)).find("int1").text());
        if (int1 > 0) {
          that.style.color = "blue";  
        }
      }
    });
  });
});

Second way is proxy'ing, this way, you set the context of the this keyword to whatever you want.

$("a").each(function(index) {
  this.addEventListener("click", function(evt) {
    $.ajax(this.href)
      .done($.proxy(function(html) {
        var int1 = parseInt($($.parseHTML(html)).find("int1").text());
        if (int1 > 0) {
          this.style.color = "blue";
        }
      }, this);
    });
  });
});

Reference: https://api.jquery.com/jQuery.proxy/

score 0 · Accepted Answer · answered May 03 '19 at 14:12

Taplar's link to the duplicate answered my question.

The answer was to declaring the variable before calling $.ajax().

(Sorry Taha. I thought I had already posted this response.)

$("a").each(function(index) {
  this.addEventListener("click", function(evt) {
    var anchor_element = this;
    $.ajax(anchor_element.href)
      .done(function(html) {
        var int1 = parseInt($($.parseHTML(html)).find("int1").text());
        if (int1 > 0) {
          anchor_element.style.color = "blue";
      }
    });
  });
});

How can I refer to the parent element once inside another function?

2 Answers2