jquery：添加一個容器內的所有圖像元素的寬度

我有一個想法，我可能會這樣做，但我想知道如果任何人有更好的想法或可以幫助我。我有一個無序列表，其中包含動態生成的不同數量的圖像。我想添加每個圖像的寬度，並將包含無序列表寬度設置爲該值。jquery：添加一個容器內的所有圖像元素的寬度

例如，如果三個圖像是輸出的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>

如果圖像之一是200像素，圖像中的兩個是100像素，並且圖像三樣50像素，我想分配縮略圖的寬度從ul到350px。

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

雖然每個圖片都有一個2px的margin-right，但是我也希望將其添加到圖片中。所以如果生成3張圖片，我想總寬度爲356px。

謝謝大家的幫助。我一直在尋找jQuery的each（）和width（）函數來完成這個。

來源

2010-09-22 mau5

感謝您接受的答案。您也可以通過點擊向上箭頭來使其生效。 :) – 2010-09-22 16:50:47

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

來源

2010-09-22 16:36:20

感謝的人。跟你一起，因爲你佔了+2的餘量。不錯的代碼。 – mau5 2010-09-22 16:50:34

您可以使用.outerWidth（）來計算邊距等。我會推薦使用.outerWidth（），所以如果您稍後在路上更改邊距，則不必更改「2」...（I知道這篇文章是在'10發表的，但是我發佈了這個文章給那些絆倒我的人，就像我通過谷歌搜索一樣...） – derekmx271 2013-03-10 10:30:09

感謝您的代碼。爲了使它與Safari和Chrome一起工作，我需要使用窗口加載而不是準備好。不知道這種方法的缺點是什麼，但即時猜測他們是一個，因爲準備就緒更常見。

來源

2011-02-07 11:00:10 Evans

jquery：添加一個容器內的所有圖像元素的寬度

回答

相關問題