javascript - jQuery 将 img 附加到每个 div

Question

我正在尝试为每个 thumb 类显示缩略图，但目前我得到的输出低于图像在 href 内循环的位置。 div、href 和 img 的顺序不能改变。它看起来像这样 jsfiddle但这当然不是完全有效...

目前得到:

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

要求的输出:

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

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

我的循环:

var thumbnails = [];

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

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

我是不是循环错了？

编辑:

缩略图是动态图库的一部分，基本上每次用户在下拉列表中选择不同的选项时，缩略图的来源都应该相应地改变。

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

缩略图示例数组:

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

示例输出:

<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

您需要在 .thumb 上使用 .each 函数。像这样的东西:

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