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>

如果图像一为 200px，图像二为 100px，图像三为 50px，我想将缩略图 ul 的宽度指定为 350px。

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

不过，每个图像都在订单项上应用了 2 像素的右边距，因此我也想将其添加到图像中。因此，如果生成 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 read 更常见。