JQuery adds img for each div

Question

I am trying to display a thumbnail image with each class thumb, but currently I am getting the output below where the images are looping inside href. Order div, hrefand imgshould not change. It looks like jsfiddle , but it certainly does not fully work ...

currently receiving:

<div class ='thumb'>
  <a href="#" rel="1">
    <img src="">
  </a>
    <img src="">
    <img src="">
</div>

output required:

<div class ='thumb'>
  <a href="#" rel="1">
    <img src=>
  </a>
</div>

<div class ='thumb'>
  <a href="#" rel="1">
    <img src="">
  </a>
</div>

my loop:

var thumbnails = [];

$.each(data.productVariantImages,function(key, val){ 
    thumbnails.push(val.imagePath);
});

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

Am I mistaken for a mistake?

edit:

Thumbnails are part of a dynamic gallery, where basically every time the user selects a different option from the drop-down list, the sources for the thumbs should change accordingly.

current html:

<div class="thumbnail"><?php 
  foreach($skuDetails['productVariantImages'] as $variantImage){
  if(isset($variantImage) && $variantImage['visible']){
 ?>
<div class="thumb">
  <a href="#" rel="1">
     <img src="<?php echo $variantImage['imagePath']; ?>" id="thumb_<?php echo $variantImage['id']; ?>" alt="" />
   </a> 
</div> <?php }}?>
</div>

an array of sample sketches:

["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"]

sample output:

<div class="thumbnail">                     
    <div class="thumb">
    <a href="#" rel="1">
     <img src="http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples.png" id="thumb_323" alt="">
    </a> 
    </div>      

   <div class="thumb">
    <a href="#" rel="1">
     <img src="http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples.png" id="thumb_323" alt="">
    </a> 
    </div>                     
</div>

Answer 1

.each .thumb. - :

$(document).ready(function(){
   $('.thumb').each(function(){
       $(this).append($('<img>').attr({"src":[thumbnails[thumb]],}));
   });
});

Answer 2

. img . , img . div div.

var div = $(".thumbnail");

$.each(imageArray, function(index, value){
    var elem = "<div class='thumb'><a href='#' rel='1'></div>";
    div.append($elem);
    $('.thumb').append("<img />").attr("src", value);
});

, . . , .

Answer 3

, , JavaScript. , thumbClone() . , . , , , , .: -\

DEMO

function thumbClone(qty) {
  var main = document.getElementById('main');
  var aFig = document.createElement('figure');
  var aLnk = document.createElement('a');
  var aImg = document.createElement('img');

  aLnk.appendChild(aImg);
  aImg.src = "http://placehold.it/84x84/000/fff.png&text=THUMB"
  aFig.appendChild(aLnk);
  aLnk.setAttribute('rel', '1');
  main.appendChild(aFig);
  aFig.className = "thumb";

  console.log('qty: ' + qty);
  var thumb = document.querySelector('.thumb');
  for (var i = 0; i < qty; i++) {
    var clone = thumb.cloneNode(true);
    thumb.parentNode.appendChild(clone);
  }
}

Answer 4

, , ,

$(selector).each(function(){
       // do your stuff here
)};

$('.thumb a').each(function(){
       // do your stuff here
        $(this).append($('<img />').attr('src',[thumbnails[thumb]]);
)};

Answer 5

It looks like you need to create an entire div structure for each image.

Allows you to dynamically create the following structure using the maximum length of an image array and add an src image.

var thumbDivStart = "<div class ='thumb'><a href="#" rel="1">";
var thumbDivEnd = "</a></div>";
var thumbDiv = "";
for (i = 0; i < imageArray.length; i++) { 
    thumbDiv = thumbDivStart + "<img src="+imageArray[i]+"/>"+
               thumbDivEnd;
 //Here you can append the thumbDiv to the parent element wherever you need to add it.
}