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