如何使用JS/jQuery在div中選擇圖像

Question

我有一個名爲「works」的數組，其中包含7個圖像。 他們應該顯示在這樣定義一個網格：

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

現在JS我填充/這些圖片更換「作品」，然後我要關閉邊界紅色。但是我不太瞭解如何正確選擇它們。這應該是正確的代碼，但它似乎沒有工作。這是什麼$("#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

問題的好喜歡的來源，我相信，但我不明白爲什麼它的一個問題。如果選擇「2px固體鮭魚」作爲邊框顏色，它可以工作，但如果我採用「2px紅色」或「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 -->