Question

 for (i = 0; i < 10; i++) {
if(i%4===0){
            $("#image-album").append('<div class="row">');
          }
          
          $("#image-album").append('<div class="col-md-3">image '+i+'</div>')
         
          if(i!==0 && (i+1)%4===0){
            $("#image-album").append('</div>');
          }
          };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<span id="image-album">
</span>

我想用jquery更新我的dom，其中包含用于在网格中显示图像的引导类。但是我无法在“行”类中添加div。我尝试做一些代码片段中显示的内容。期待它：

<div class="row">
 <div class="col">
  image 1
 </div>
 <div class="col">
  image 2
 </div>
 <div class="col">
  image 3
 </div>
 <div class="col">
  image 4
 </div>
</div>

但它最终成为：

<div class="row"></div>
<div class="col">
  image 1
</div>
<div class="col">
  image 2
</div>
<div class="col">
  image 3
</div>
<div class="col">
  image 4
</div>

Answer 1

首先，构建完整的HTML，然后附加到span

＆＃13;

let htlm ="";
for (i = 0; i < 10; i++) 
{

    if(i%4===0)
    {
       htlm +='<div class="row">';
    }
    htlm +='<div class="col-md-3">image '+i+'</div>';
    if(i%4===3)
    {
       htlm +='</div>';
    }
        
};
$("#image-album").append(htlm);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<span id="image-album">
</span>

＆＃13;

使用div标签和bootstrap类更新DOM

1 个答案: