jquery - 如果引导列达到 12，如何在 jQuery 中添加类行？

Question

我有这个 jquery 代码，它将在 div 容器内附加图像。如果列达到 12，我只想添加 div 类行。

谁能给我一个主意。提前谢谢你。

for (var i = 0, j = result.images.length; i < j; i++){
    $("#imageContent").append("<div class='col-md-3'><img src='storage/uploaded/" + result.images[i].name + "' class='img-responsive img-thumbnail'></div>");
}

这里是我的分区

<div class="container" id="imageContent" style="display: block;">

</div>

这是我当前的输出。

<div class="container" id="imageContent" style="display: block;">
    <div class="col-md-3">
        <img src="storage/uploaded/attl1.jpg" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/attl2.jpg" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/May 11, 2017.png" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/8.png" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/logo.png" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/a2la_logo.png" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/attl1.jpg" class="img-responsive">
    </div>
</div>

但如果列达到 12，我想添加 Div 类行 预期输出

<div class="container" id="imageContent" style="display: block;">
  <div class="row">
    <div class="col-md-3">
        <img src="storage/uploaded/attl1.jpg" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/attl2.jpg" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/May 11, 2017.png" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/8.png" class="img-responsive">
    </div>
  </div>
  <div class="row">
    <div class="col-md-3">
        <img src="storage/uploaded/logo.png" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/a2la_logo.png" class="img-responsive">
    </div>
    <div class="col-md-3">
        <img src="storage/uploaded/attl1.jpg" class="img-responsive">
    </div>
  </div>
</div>

Answer 1

你可以这样使用

for (var i = 0, j = result.images.length; i < j; i++){

    if(i==0 || i%4 == 0)
    {
        var appendEl = $("<div class='row'></div>").appendTo("#imageContent");
    }
    $("<div class='col-md-3'><img src='storage/uploaded/" + result.images[i].name  + "' class='img-responsive img-thumbnail'></div>").appendTo(appendEl);
}

检查 js fiddle https://jsfiddle.net/9Lrg2ecq/

更新:请查看屏幕截图 https://ibb.co/fzcR6Q