Check for element equality in an animation function

I have the the below code and would expect that in the first pass of the fadeTo function "yes" would be printed as those first two console logs tell me it is the same element. But it doesn't recognize them as equal. What do I miss here?

var tds = self.element.find("td:nth-child(" + (columnIndex + 1) + ")");
tds.fadeTo(options.columnFadeOutTime, 0, function() {
  window.console.log(tds.first());
  window.console.log($(this));
  if ($(this) == tds.first()) {
    window.console.log("yes");
  }
  else {
    window.console.log("no");
  }
开发者_开发百科}

---

You're comparing 2 jQuery objects, which are different, not the DOM elements they reference, that would be like this:

var tds = self.element.find("td:nth-child(" + (columnIndex + 1) + ")");
tds.fadeTo(options.columnFadeOutTime, 0, function() {
  window.console.log(this == tds[0] ? "yes" : "no");
});

Note that there's no reason to turn this into a jQuery object at all here. Also, since you're just debugging, you can just use window.console.log(this == tds[0]); which would give you true or false in the console.

An alternative approach, if you want to .queue() something to run only on the first when it completes (which is what you seem to be after):

var tds = self.element.find("td:nth-child(" + (columnIndex + 1) + ")");
tds.fadeTo(options.columnFadeOutTime, 0).first().queue(function(n) {
  //do something
  n();
});

---

It looks like you're comparing jQuery objects instead of their underlying DOM elements. That won't work as expected, because in your example $(this) is a new created jQuery object which won't be the same as the one returned by first(), even if they both contain the same DOM element.

You can use the get() method to access the underlying DOM elements in order to compare them:

if (this == tds.first().get(0)) {
    window.console.log("yes");
} else {
    window.console.log("no");
}

---

This is because you cannot compare two jQuery objects like that. It's already been answered in another question: How would you compare jQuery objects?

In your case you would have to do:

if (this == tds.first()[0] { /* ... */ }