title: Jquery: add the width of all image elements within a container
body: <p>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.</p>
  
  <p>For example, if three images were output the html might look like this:</p>
  
  <pre><code>&lt;ul id="thumbnails"&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="image_path"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="image_path"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="image_path"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>$('#thumbnails').css('width', '350px');
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks all for any help.  I've been looking at jquery's each() and width() functions to accomplish this.</p>