use "this" inside $.each inside object method

Question

I'm trying to get this to point to each img inside a function inside an object method, like so

var responsiveImageSwap = (function(){
    return {
        init : function(){
            $.each('img', function(){
                var width     = $(window).width(),
                    _this     = this, 
                    alert(_this.attr('src'))
            })
        }
    }
})();
responsiveImageSwap.init();

But it is referencing the object and not the img, how do I reference the image?

Why not $('img').each(…? Also, you don't want to compute the viewport width inside a loop. — Šime Vidas
– Šime Vidas, Commented Jul 29, 2013 at 14:18

gen_Eric · Accepted Answer · 2013-07-29 14:25:51Z

8

$.each is for looping over collections. What you are doing is looping over the letters in the string 'img'.

You want to use .each; this is for jQuery objects.

$('img').each(function(){
    var width = $(window).width(),
        // this is a DOM element, we need to make it a jQuery object
        _this = $(this), 
     alert(_this.attr('src'))
});

edited Jul 29, 2013 at 14:25

answered Jul 29, 2013 at 14:19

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

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

6 Comments

gen_Eric Over a year ago

@Virus721: I was just using the code the OP had. It's not very useful here, but it may be if he uses closures inside the callback.

Šime Vidas Over a year ago

@RocketHazmat Your code won't work. this refers to the IMG element which does not have a .attr() method.

gen_Eric Over a year ago

@ŠimeVidas: Yeah... I just noticed that. >.<

gen_Eric Over a year ago

@ŠimeVidas: I haven't finished my coffee yet, sue me. I fixed it. :-)

Šime Vidas Over a year ago

@RocketHazmat Hehe, I'm drinking my morning coffee right now as well. (The weird part is that it's 4:30 PM where I live.)

|

Šime Vidas · Accepted Answer · 2013-07-29 14:28:21Z

3

This?

return {
    init: function () {
        var vw = $(window).width(); // viewport width

        $('img').each(function () {
            var $img = $(this);

            // Do stuff with $img, e.g. retrieve $img.attr('src')
        });
    }
};

edited Jul 29, 2013 at 14:28

answered Jul 29, 2013 at 14:21

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

1 Comment

Oli_M Over a year ago

Thanks, you answered the question first with your comment so will accept this (no pun intended)

Collectives™ on Stack Overflow

use "this" inside $.each inside object method

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related