jQuery access parent object attribute?

Question

So I have this code:

function theObject(){
    this.someelement = $("#someelement");
    this.someotherelement = $("someotherelement");
    this.someelement.fadeOut(500, function(){
       this.someotherelement.attr("title", "something");
       this.someelement.fadeIn(500); 
    });
}

for some reason this.someotherelement is undefined. I'm guessing because it's wrapped in a function(){}?

post some of the relevant html too, so it will be more clear... — gillyb
– gillyb, Commented Jul 22, 2010 at 17:26
Inside the function, this refers to this.someelement (actually to its DOM element). With most (every?) jQuery function that takes a callback, this refers to the (DOM) element you call the function on. — Felix Kling
– Felix Kling, Commented Jul 22, 2010 at 17:29

Darin Dimitrov · Accepted Answer · 2010-07-22 17:26:08Z

3

Inside the function this means something else. You could capture it though:

this.someotherelement = $("someotherelement");
var _this = this;
this.someelement.fadeOut(500, function(){
   _this.someotherelement.attr("title", "something");
   _this.someelement.fadeIn(500); 
});

answered Jul 22, 2010 at 17:26

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

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

1 Comment

Felix Kling Over a year ago

Instead of _this.someelement you could also use $(this).

Hooray Im Helping · Accepted Answer · 2010-07-22 17:27:37Z

1

This is caused by a JavaScript scoping issue. Creating a function creates a new scope for this which makes this refer to the function. You can fix it by doing ... this:

function theObject(){
  this.someelement = $("#someelement");
  this.someotherelement = $("someotherelement");

  // bind this to that (what?). This way, this will still be accessible inside
  // the new function's scope as that
  var that = this;
  this.someelement.fadeOut(500, function(){
    that.someotherelement.attr("title", "something");
    that.someelement.fadeIn(500); 
  });
}

answered Jul 22, 2010 at 17:27

Hooray Im Helping

5,2745 gold badges32 silver badges45 bronze badges

Comments

Ahmed Aman · Accepted Answer · 2010-07-22 17:27:37Z

0

I have edited your code , I hope it helps.

function theObject(){
    var someelement = $("#someelement");
    var someotherelement = $("#someotherelement");
    someelement.fadeOut(500, function(){
       someotherelement.attr("title", "something");
       someelement.fadeIn(500); 
    });
}

answered Jul 22, 2010 at 17:27

Ahmed Aman

2,4231 gold badge20 silver badges33 bronze badges

Comments

DavidT · Accepted Answer · 2010-07-22 19:30:03Z

0

is someotherelement an ID? If so, you are missing a #...

this.someotherelement = $("#someotherelement");

answered Jul 22, 2010 at 19:30

DavidT

3063 silver badges10 bronze badges

Collectives™ on Stack Overflow

jQuery access parent object attribute?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related