jQueryの 'マッピング'：変数値を使用して配列を反復する方法

Question

2つのデータ「ポイント」をまとめてマップしようとしていますが、実際には共通点はありません。私は配列内の特定の位置に画像を含む配列を持っています。また、さまざまな値（1,2または3）を含むことができる変数があり、特定の配列位置にあるイメージを表示するために、配列位置（1、2または3）と変数値をマップする必要があります。

<script> 

var images = new Array() 
images[1] = 'image/position/in/folder/image.jpg'; 
images[2] = 'image/position/in/folder/image.jpg'; 
images[3] = 'image/position/in/folder/image.jpg'; 

var var_name = somedata 


/*----here I need help or guidance---- 

jQuery(document).ready(function() { 
    var jQuerydiv = jQuery(".image_div"); 

    jQuery.each(images, function(i, val) { 

     jQuery("<img />").attr("src", val).appendto(jQuerydiv); 

    }); 
}); 


/*------guidance/help ENDS------------ 

<script> 

<div class="image_div"></div> 

このスクリプトは、配列 "images"のすべてのイメージをdiv "image_div"にスローします。私は、1,2,3のいずれかの位置（1,2または3）の配列を1,2または3を含む変数var_nameの値と一致させたいだけです。

何か義務付けられています。

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
    var images = new Array() 
    images[1] = 'image1.png'; 
    images[2] = 'image2.png'; 
    images[3] = 'image3.png'; 

    // console.log(images); 
    // [empty × 1, "image1.png", "image2.png", "image3.png"] 
    // here images are put at index 1,2,3 
    var var_name = 1; 

    $(document).ready(function() { 
     var jQuerydiv = $(".image_div"); 

    $.each(images, function(i, val) { 
    // now append image at index 1 to div 
    if(i == var_name){ 
     $("<img />").attr("src", val).appendTo(jQuerydiv); 
    } 
    }); 
}); 
</script> 

<div class="image_div"></div> 

Answer 2

使用appendToとは、私はあなたの方法を試してみました

img 
 
{ 
 
border: 1px solid #000; 
 
    width: 50px; 
 
    height: 50px; 
 
}

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

 
var images = new Array() 
 
images[0] = 'image/position/in/folder/image.jpg'; 
 
images[1] = 'image/position/in/folder/image.jpg'; 
 
images[2] = 'image/position/in/folder/image.jpg'; 
 

 

 
jQuery(document).ready(function() { 
 
    var jQuerydiv = jQuery(".image_div"); 
 

 
    jQuery.each(images, function(i, val) { 
 

 
     jQuery("<img />").attr("src", val).appendTo(jQuerydiv); 
 

 
    }); 
 
}); 
 

 
</script> 
 

 
<div class="image_div"></div>