Jquery：添加容器中所有图像元素的宽度

Question

我知道如何做到这一点，但我想知道是否有人有更好的想法或可以帮助我。我有一个无序列表，其中包含动态生成的不同数量的图像。我想添加每个图像的宽度，并将包含的无序列表宽度设置为该值。

例如，如果输出三个图像，html可能如下所示：

<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>

如果图像1为200px，图像2为100px，图像3为50px，我想将缩略图的宽度指定为ul为350px。

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

虽然每张图片都有一个2px页边距权限应用于订单项，所以我也想将其添加到图片中。因此，如果生成3个图像，我希望总宽度为356px。

感谢大家的帮助。我一直在研究jquery的each（）和width（）函数来完成这个。

Answer 1

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

Answer 2

感谢您的代码。为了让它与Safari和Chrome一起工作，我需要加载窗口加载而不是dom准备好。不知道这个方法的缺点是什么，但我猜他们是一个准备好的dom更常见。