CODEWITHSUNDEEP
javascriptjquery
trrrrrrm
trrrrrrm

Reputation: 11812

how to fix $(this) inside another $(this)

u gave a problem in this code it gives me $(this).fadeIn() is not a function, any thoughts ?

$('img').hide().each(function(){
        $(this).load(function(){
            $(this).fadeIn();
        });
    });

Upvotes: 2

Views: 96

Answers (3)

user113716
user113716

Reputation: 322502

Your code is correct. Not sure what the issue would be. In the .load() event handler, this references the element that received the event, so there should be no reason to close around the outer this.

If you're not doing anything else in the .each(), you could get rid of that:

Example: http://jsfiddle.net/patrick_dw/b4cNZ/1/

$('img').hide().load(function() {
   $(this).fadeIn(2000);
});

Otherwise, if you needed to test to make sure the image gets revealed when cached, you could do this:

Example: http://jsfiddle.net/patrick_dw/b4cNZ/2/

$('img').hide().each(function() {
    if (this.complete) {
        $(this).fadeIn(2000);
    } else {
        $(this).load(function() {
            $(this).fadeIn(2000);
        });
    }
});

Upvotes: 0

ClosureCowboy
ClosureCowboy

Reputation: 21541

The value of this changes inside of nested functions — its value isn't "captured" the way other variables are.

To avoid this, you can assign this to another variable!

$('img').hide().each(function(){
    var that = $(this);
    that.load(function(){
        that.fadeIn();
    });
});

Upvotes: 3

icyrock.com
icyrock.com

Reputation: 28608

If you meant fixing the outer $(this) in inner function, you can do:

$('img').hide().each(function(){
        var outer = $(this);
        outer.load(function(){
            outer.fadeIn();
        });
    });

Upvotes: 3

Related Questions