javascript - 如何在 Bootstrap 行类中每次包装三个图像？

Question

我有一组图像。我需要将三张图片连续包装成一组。

伪代码如下:

<div class="row" id="group1"> 
   <img 1>
   <img 2>
   <img 3>
</div>

<div class="row" id="group2"> 
   <img 4>
   <img 5>
   <img 6>
</div>

.....数组中剩余的图像继续。

我知道如何包装图像，并附加 <div class="row" id="group1"><div>转换成 html。

我不知道的是如何将一组中的三个图像分配到行 div 中，其中包含一个 id，该 id 会根据数组中的图像数量动态增加。

例如，前三个图像被包裹在 id="group1"中。

预先感谢您的帮助!

更新

HTML 代码:

<div class="row">
    <input type="file" id="files" name="files[]" multiple /> Upload More Images
</div>

<div class="row">
    <span id="whatup" class="wrapMePlease"></span>
</div>

脚本

<script>
    $(document).ready(function () {
        if (window.File && window.FileList && window.FileReader) {
            $("#files").on("change", function (e) {
                var files = e.target.files,
                    filesLength = files.length;
                var count = 0;

                for (var n = 0; n < filesLength; n = n + 3)
                //          Insert a row for 3 image cols
                    $("<div class=\"row\" id=\"addColHere0\"></div>").insertAfter("#whatup");

                for (var i = 0; i < filesLength; i++) {


                    var f = files[i]
                    var fileReader = new FileReader();
                    fileReader.onload = (function (e) {
                        var file = e.target;

                        // get the last DIV which ID starts with ^= "klon"
                        var $div = $('div[id^="addColHere"]:last');

                        // Read the Number from that DIV's ID (i.e: 3 from "klon3")
                        // And increment that number by 1
                        var num = parseInt($div.prop("id").match(/\d+/g), 10) + 1;
                        var changedId = "#addColHere" + (num - 1);
                        // Clone it and assign the new ID (i.e: from num 4 to ID "klon4")
                        var $klon = $div.clone().prop('id', 'klon' + num);

                        // >>> Append $klon wherever you want

                        //          Insert cols inside row 
                        $(changedId.value).append("<div id=\"breakThis\" class=\" col-sm-4 col-xs-6 toBeRemove\" style=\"padding:0 0px;\">" +
                            "<div class=\"col-sm-12  camera-style-small\"   align=\"left\" >" +
                            "<img style=\"    width:100%; height:100%; z-index:102;\" class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                            "<span class=\"remove icon-delete_icon create-deleteStyle\"></span>" +
                            "</div>" +
                            "</div>");
                        i = i + 1;



                        $(".remove").click(function () {
                            //            $(this).parent(".camera-style-small").remove();
                            $(this).closest(".toBeRemove").remove();
                        });
                    });
                    fileReader.readAsDataURL(f);

                }
            });

        } else {
            alert("Sorry, but your browser doesn't support this function. Please update or try another browser.")
        }
    });
</script>

Answer 1

坚持你的伪代码示例(以帮助明确你正在寻找的东西):

let html = '';
let groupVal = 1;
for (let i = 0; i < files.length; i++) {
  if (i % 3 === 0) {
    html += `<div class="row" id="group${groupVal}"><div class="col-xs-12">`;
    groupVal++;
  }
  html += `<img ${i + 1}">`;
  if (i % 3 === 0) { html += `</div></div>`; }
}
...
$(TARGET).append(html);

这是 Fizz Buzz 的真实例子!

• 确定是否应创建新“组 div”的逻辑由模运算处理
• 数组的长度由files.length决定
• String interpolation用于将当前运行的变量放入不断增长的html字符串中

这似乎是朝着正确方向迈出的一步吗？