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.Правильно применимо к позиции, поэтому я хотел бы добавить это и к изображению.Поэтому, если было сгенерировано 3 изображения, я бы хотел, чтобы общая ширина была 356 пикселей.

Спасибо всем за любую помощь.Я смотрю на 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, мне нужно было загрузить его с загрузкой окна, не готовой к работе.Не уверен, в чем состоит недостаток этого метода, но я предполагаю, что он один, так как готовность к работе чаще встречается.