Jquery: ajouter la largeur de tous les éléments d'image dans un conteneur

Question

J'ai une idée de comment je pourrais faire cela mais je me demandais si quelqu'un avait une meilleure idée ou pourrait m'aider. J'ai une liste non ordonnée avec un nombre variable d'images générées dynamiquement en leur sein. Je voudrais ajouter la largeur de chaque image et définir la largeur de liste non ordonnée contenant à cette valeur.

Par exemple, si trois images étaient sortie html pourrait ressembler à ceci:

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

Si l'image était un 200px, image en deux était 100px, et l'image de trois était 50px, je voudrais attribuer le largeur des vignettes ul à 350px.

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

Chaque image a une 2px marge droite appliquée à l'élément de ligne, donc je voudrais ajouter à l'image aussi bien. Donc, si 3 images ont été générées, je voudrais que la largeur totale soit de 356px.

Merci à tous pour votre aide. J'ai regardé les fonctions each() et width() de jquery pour accomplir ceci.

Answer 1

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

Answer 2

Merci pour le code. Pour le faire fonctionner avec Safari et Chrome, je devais le charger avec la charge de la fenêtre et non pas prêt. Je ne suis pas sûr de ce que l'inconvénient de cette méthode est, mais je suppose que leur est un plus prêt.