使用jquery動態地在行和列的引導網格中添加圖像？

Question

<div class="modal fade" id="emojimodal" tabindex="-1" role="dialog" aria-labelledby="emojilabel" aria-hidden="true"> 
 
     <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header" id="bgcolorheader"> 
 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
        <h3 class="modal-title" id="myModalLabel">Select emoji</h3> 
 
       </div> 
 
       <!-- to be dynamically populated from js --> 
 
       <div class="modal-body" id="modalDiv"> </div> 
 
      </div> 
 
     </div> 
 
    </div>

我需要在行和引導網格的列在模式中添加圖像。我需要動態使用jQuery來做到這一點。我先用行開始，然後我需要爲每個列擴展相同的邏輯。以下功能僅顯示第一張圖像。我如何讓圖像顯示在多行中？

function createGrid(rownum, imagearraySrc) { 
 
    for (var rowIndex = 0; rowIndex < rownum; rowIndex++) { 
 
     var rowid = "row" + rowIndex; 
 
     var $row = $("<div>", { 
 
      "class": "row", 
 
      "id": rowid 
 
     }); 
 
     $('#modalDiv').append($row); 
 

 
     var imgid = "img" + rowIndex; 
 
     var $img = $("<img>", { 
 
      "id": imgid, 
 
      "src": imagearraySrc[rowIndex], 
 
     }); 
 
     $($row[rowIndex]).append($img); 
 
    } 
 
};

的ROWNUM值獲取傳遞給函數爲2 imagearraySrc包含所有圖像的SRC。目標是擁有x行和y列，並在每個列中都有圖像。所有這些都會以模式顯示，用戶將選擇其中一個。附加的代碼是一個起點，並沒有幫助我前進。有人可以幫忙嗎？

Answer 1

在這裏，你去了一個解決方案https://jsfiddle.net/kzxh0r5u/

var imagearraySrc = ["http://via.placeholder.com/350x150", "http://via.placeholder.com/350x150","http://via.placeholder.com/350x150", "http://via.placeholder.com/350x150","http://via.placeholder.com/350x150","http://via.placeholder.com/350x150","http://via.placeholder.com/350x150","http://via.placeholder.com/350x150","http://via.placeholder.com/350x150","http://via.placeholder.com/350x150","http://via.placeholder.com/350x150"]; 
 

 
function createGrid(rownum, colnum) { 
 
    var imgCnt = 0; 
 
    $('#modalDiv').append('<div class="container-fluid"></div>') 
 
    for (var rowIndex = 0; rowIndex < rownum; rowIndex++) { 
 
    $('#modalDiv > div.container-fluid').append('<div class="row" id="row' + rowIndex + '"></div>'); 
 
    for(var colIndex = 0; colIndex < colnum; colIndex++) { 
 
     $('#row' + rowIndex).append('<div class="col-md-4 col-sm-6"><img src="' + imagearraySrc[imgCnt] + '" class="img-responsive" /></div>'); 
 
     imgCnt++; 
 
    } 
 
    } 
 
}; 
 

 
createGrid(2,3); 
 

 
$('#emojimodal').modal('show');

.row{ 
 
    padding-top: 10px; 
 
}

<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> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="modal fade" id="emojimodal" tabindex="-1" role="dialog" aria-labelledby="emojilabel" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header" id="bgcolorheader"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
      <h3 class="modal-title" id="myModalLabel">Select emoji</h3> 
 
     </div> 
 
     <!-- to be dynamically populated from js --> 
 
     <div class="modal-body" id="modalDiv"> </div> 
 
    </div> 
 
    </div> 
 
</div>

希望這會幫助你。

首先，我們需要添加.container-fluid到模體，再加入rows隨着column