Check for element equality in an animation function

Question

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

Nick Craver · Accepted Answer · 2011-01-07 10:50:22Z

3

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

answered Jan 7, 2011 at 10:50

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Frédéric Hamidi · Accepted Answer · 2011-01-07 11:00:10Z

1

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

edited Jan 7, 2011 at 11:00

answered Jan 7, 2011 at 10:49

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:18:41Z

1

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] { /* ... */ }

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Jan 7, 2011 at 10:50

mekwall

29.1k6 gold badges78 silver badges77 bronze badges

Collectives™ on Stack Overflow

Check for element equality in an animation function

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related