Foreach loop in jquery

Question

I have a problem where i am getting the window size in jquery then looping througbh three img elements to apply the width to the inline style on the fly.

The issue is that when the foreach loop is run i get this error in the console Uncaught TypeError: Object [object Object] has no method 'setAttribute'

I have put a breakpoint in the loop and applied setAttribute to this and it appears to work fine. I dont understand why when it loops through the array it is not treating each array item as an object but seems to be trying to access the array as an object.

var windowsize = $(window).width();

$(window).resize(function() {

    windowsize = $(window).width();

    $( "#imgs img" ).each(function (){
        $( this ).setAttribute("style","width:"+windowsize+"px");

    });                                                                 
});

sorry if this isn't clear

any help will greatly be appreciated

Matt R. Wilson · Accepted Answer · 2013-07-26 16:28:37Z

2

The setAttribute is a js method and not a jquery method.

You either need to use the raw js method on the DOM element directly or use the jQuery version .attr() of the method.

Both the below ways are the same, but personally using the native js feels better.

$( this ).attr("style","width:"+windowsize+"px");
this.setAttribute("style","width:"+windowsize+"px");

answered Jul 26, 2013 at 16:28

Matt R. Wilson

7,5955 gold badges35 silver badges51 bronze badges

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

2 Comments

Ian Routledge Over a year ago

But if you do use the jQuery version, you could do away with the loop to make it shorter: $("#imgs img").width(windowsize);

serps Over a year ago

Thanks very much, I actually didnt know I couldnt use raw js methods on jquery objects. that helped alot!

emerson.marini · Accepted Answer · 2013-07-26 16:28:14Z

1

.setAttribute() is a native Javascript method. As you're using jQuery, use .attr() instead:

$(this).attr("style", "width:" + windowsize + "px");

or:

$(this).css("width", windowsize + "px");

or even better:

$(this).width(windowsize);

answered Jul 26, 2013 at 16:28

emerson.marini

9,3462 gold badges35 silver badges50 bronze badges

Collectives™ on Stack Overflow

Foreach loop in jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related