Jquery：添加容器内所有图像元素的宽度答案

【问题标题】：Jquery: add the width of all image elements within a containerJquery：添加容器内所有图像元素的宽度
【发布时间】：2011-04-15 20:25:50
【问题描述】：

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

例如，如果输出三个图像，则 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');

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

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

【问题讨论】：

感谢您接受的答案。您也可以通过单击向上箭头对其进行投票。 :)

标签： jquery image width each

【解决方案1】：

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

【讨论】：

谢谢伙计。和你一起去，因为你占了 +2 边距。不错的代码。
您可以使用 .outerWidth() 来计算边距等。我建议使用 .outerWidth() ，因此如果您稍后更改边距，则不必更改“2”这条路......（我知道这篇文章是在 10 年发表的，但我为任何偶然发现这个的人发布了这篇文章，就像我通过谷歌搜索所做的那样......）

【解决方案2】：

感谢您的代码。为了让它与 Safari 和 Chrome 一起工作，我需要在没有准备好 dom 的情况下加载它。不确定这种方法的缺点是什么，但我猜他们是一种，因为 dom 准备好更常见。

【讨论】：