Jquery: add the width of all image elements within a container

Question

Hey everyone,

I have an idea of how I might do this but I was wondering if anyone had a better thought or could help me out. I have an unordered list with a varying number of images dynamically generated within them. I'd like to add the width of each image and set the containing unordered list width to that value.

For example, if three images were output the html might look like this:

<ul id="thumbnails">
    <li><a href="#"><img src="image_path"></a></li>
    <li><a href="#"><img src="image_path"></a></li>
    <li><a href="#"><img src="image_path"></a></li>
</ul>

If image one was 200px, image two was 100px, and image three was 50px, I'd like to assign the width of the thumbnails ul to 350px.

$('#thumbnails').css('width', '350px');

Each image does have a 2px margin-right applied to the line item though, so I'd like to add this to the image as well. So if 3 images were generated I'd like the total width to be 356px.

Thanks all for any help. I've been looking at jquery's each() and width() functions to accomplish this.

Answer 1

var accum_width = 0;
$('#thumbnails').find('img').each(function() {
   accum_width += $(this).width() + 2;
});
$('#thumbnails').width(accum_width);