使用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