JS/jQueryでdiv内の画像を選択する方法

Question

私は7つの画像を含む「作品」という配列を持っています。 は、彼らは、このように定義されたグリッドに表示されます：

<div class="container"> 
    <div class="row" id="g-work"> 
    </div><!--/row --> 
</div><!--/container --> 

今JSでのI /充填これらの画像を「作品」を交換してから、私は赤のボーダーをオンにしたいのです。しかし、私はそれらを正しく選択する方法を本当に理解していません。これは正しいコードであると思われますが、うまくいかないようです。この$("#g-work img)は何をしているのですか？ #g-workに画像タグはありません。どういう意味ですか？なぜ、var images=worksと書くことができないのですか？下のコードを試してみると、私の開発ツールは画像が定義されていないことを教えてくれます。ここでの問題は何ですか？

for(var i = 0; i < works.length; ++i) { 
    $("#g-work").append("\ 
    <div class='col-sm-6 col-md-3'>\ 
     <img class='img-responsive' src='" + works[i] + "'>\ 
    </div>\ 
    "); 

    var images = $("#g-work img"); 
    $(images[i]).css("border", "2px red"); 
}; 

Answer 1

works=["http://www.cutestpaw.com/wp-content/uploads/2016/02/s-That-look.jpg","http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Yoshi-The-Seal-Kitteh.jpg"] 
 
    
 
$.each(works,function(key,value) 
 
{ 
 
    let DIV=$("<div/>",{class:"col-sm-6 col-md-3"}); 
 
    let Image=$("<img/>",{class:"img-responsive",src:value,style:"border:solid 2px red;margin-bottom:5px"}); 
 
    $(DIV.append(Image)).appendTo("#g-work"); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row" id="g-work"> 
 
    </div><!--/row --> 
 
</div><!--/container -->

Answer 2

[OK]を好きな問題の原因は、私は信じているが、私は、なぜその問題を理解していません。ボーダーカラーとして「2px solid salmon」を選択した場合は機能しますが、「2px red」または「2px ffffff」を取るとそうはなりません。

var works=["http://www.cutestpaw.com/wp-content/uploads/2016/02/s-That-look.jpg","http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Yoshi-The-Seal-Kitteh.jpg"] 
 

 

 

 
for(var i = 0; i < works.length; ++i) { 
 
    $("#g-work").append("\ 
 
    <div class='col-sm-6 col-md-3'>\ 
 
     <img class='img-responsive' src='" + works[i] + "'>\ 
 
    </div>\ 
 
    "); 
 
    var images = $("#g-work img"); 
 
    
 
    
 
$(images[i]).css("border", "2px solid salmon"); 
 
//$(images[i]).css("border", "2px red"); 
 

 
};

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="container"> 
 
    <div class="row" id="g-work"> 
 
    </div><!--/row --> 
 
</div><!--/container -->