jquery setting width to a variable value

Question

Could someone explain what's wrong with this snippet?

I'm looking to get the width of all images in a div.

var totalwidth = $("#imagecontainer > img").width();
$("#imagecontainer").width(totalwidth);

sorry, thought it was just a syntax problem (un)working example here:
http://jsfiddle.net/TZ2nT/3/
the container div does not accept the value for some reason?

Answer 1

did u tried this

var width = $("#imagecontainer  img:first").width();
var totalWidth = width * $("#imagecontainer  img").length;
console.log(totalWidth);

Edit :

$(function() {
  var totalwidth = 0;
  var arey = [];
  $('#imagecontainer img').each(function() {
    var width = $(this).width();
    width = parseInt(width);
    arey.push(width);
  });

  for(var i in arey) {
   totalwidth +=arey[i];
  }
  $('#imagecontainer').width(totalwidth);
  $('#readout').html(totalwidth);
});

Test it here http://jsbin.com/ayira3

Answer 2

You haven't really described what is wrong, but I'm guessing you're running the code before the image has been fully downloaded, so it doesn't yet have a width.

If that's the case, try this:

$("#imagecontainer > img").load(function() {
    var $th = $(this);
    $th.parent().width( $th.width() );
});

Remember that jQuery's .ready() method does not wait for images to load. You can use the load() method agains the <img> element instead. This way the code will not run until you actually have an image.

If you ever need to run code after all images have loaded, you can use:

$(window).load(function() {...