Get image width of images in divs with jquery

Question

Is it possible to get the width of all images the divs and then set #content css to that value with jquery? Im using a horizontal layout for a project and need to add images from time to time.

<div id="content">
  <div class="entry">
    image
    image
  </div>
 <div class="entry">
    image
    image
 </div>
</div>

Answer 1

The only way that comes to mind would be to read the contents of the CONTENT div, find every IMG tag, and get its associated width (while keeping a running total) and then assign the CONTENT div's width to the total.

Answer 2

Maybe you can try

var width = 0;
$.each(jQuery('img'), function(i, img) {
    width += $(img).width();
});
$('#content').width(width);

Answer 3

Building off of @Bob's answer. I have not tried it but it would seem to me that the .width() function would not take into account padding and margin. If it does then you only need the .width() otherwise something like below.

width = 0;
$.each(jQuery('.entry'), function(i, e) {
    width += $(e).width() 
          + $(e).css("margin-left") + $(e).css("margin-right") 
          + $(e).css("padding-left") + $(e).css("padding-left");
});
$('#content').width(width);