Impossible d'itérer en utilisant le javascript for-in

Question

J'essaie d'afficher des images dans les vignettes de ma galerie d'images en utilisant la boucle for...in mais elle ne peut afficher qu'une seule image. Je suis encore un débutant en javascript, donc ma compréhension des boucles for n'est toujours pas bonne. Où est-ce que je me suis trompé?

tableau d'échantillons:

["http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png", 
"http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png"] 

boucle for...in:

for(var thumb in thumbnails) { 
    $('.thumbnail img').attr({"src":[thumbnails[thumb]]}); 
} 

Answer 1

En fait, la boucle est parfaitement bien. Vous parcourez toutes les URL de votre tableau, mais pour chaque URL, vous définissez src pour la même miniature img, en l'écrasant à chaque fois.

Il est difficile de vous aider à résoudre, parce que je ne connais pas votre disposition exacte et exigences, mais vous devez soit efficace pour créer un ensemble de img s pour les vignettes (par opposition à un seul img, qui semble être le cas maintenant), et fixer leurs src s dans l'ordre, ou créer tout nouveau img à chaque fois et l'ajouter à un certain conteneur parent, comme suit:

for(var thumb in thumbnails) { 
    $(<some container>).append($('<img>').attr({"src":[thumbnails[thumb]]})); 
} 

Answer 2

Vous ne devriez pas utiliser for .. in pour itérer les tableaux. Why?
Utilisez plutôt Array.prototype.forEach.

Aussi, si vous souhaitez créer un élément en utilisant jQuery, puis utilisez une autre syntaxe:

thumbnails.forEach(function(thumb) { 
    $("<img/>").attr('src', thumb).appendTo(container); 
}); 

Exemple de travail:

var thumbnails = [ 
 
'https://blog.stackoverflow.com/images/wordpress/stackoverflow-logo-alt2-300.png', 
 
'http://letscode.ghost.io/content/images/2015/09/stackoverflow.png', 
 
'http://i.stack.imgur.com/kq8EX.png']; 
 

 
thumbnails.forEach(function(thumb) { 
 
    $("<img/>").attr('src', thumb).appendTo('body'); 
 
});

img { 
 
    height: 100px; 
 
    width: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>