在 insertAfter() 中使用 $(this).find('class')答案

【问题标题】：Using $(this).find('class') inside insertAfter()在 insertAfter() 中使用 $(this).find('class')
【发布时间】：2021-01-19 23:35:56
【问题描述】：

我有以下代码可以查看<input type="file"下上传的图片

$(document).on("change", ".files", function(e) {
        var files = e.target.files,
            filesLength = files.length;
            $(this).find('.pip').remove();
        for (var i = 0; i < filesLength; i++) {
            var f = files[i]
            var fileReader = new FileReader();
            fileReader.onload = (function(e) {
            var file = e.target;           
            $("<span class=\"pip\">" +
                "<img class=\"imageThumb\" src=\"" + e.target.result + "\">" +
                "<br/><span class=\"remove\"><i class='fa fa-times-circle'></i></span>" +
                "</span>").insertAfter(".file-upload");
            $(".remove").click(function(){
                $(this).parent(".pip").remove();
            });            
            });
            fileReader.readAsDataURL(f);
        }
        });

点击按钮即可复制file-upload 类。所以我想像insertAfter($(this).find(".file-upload"))这样定位当前的div？这还有效吗？我试着做，但没有奏效。我怎样才能做到这一点？

我尝试使用append，但这也无济于事。

编辑我的 HTML

<div class="medi">
   <div class="file-upload">
      <input type="file" class="files" name="images[]" multiple="">
      <img src="/upload.png" style="position: relative;top: 11px;height: 16px;width: 16px;margin-left: 8px;">
      <span class="upload-text">Upload</span>
   </div>
</div>

此部分重复。

【问题讨论】：

你能给我们你的html吗？
@angel.bonev 我已经添加了我的 HTML 代码。

标签： javascript jquery file-upload

【解决方案1】：

在你的代码中this指的是输入，所以你需要找到closest.file-upload父，你可以使用parent但是你需要保持那个结构（我更喜欢最接近的）

不要在 for 循环中添加事件，因为如果您选择 3 个文件，您的第一个 remove element 将有 3 个 click events，第二个有 2 个，最后一个有一个

$(document).on("change", ".files", function (e) {
    var files = e.target.files,
            filesLength = files.length;
    //this reffer's to <input type="file" class="files" .. so you need to get closest parent .file-upload
    let div = $(this).closest(".file-upload");
    $(div).find('.pip').remove();
    for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function (e) {
            var file = e.target;
            $("<span class=\"pip\">" +
                    "<img class=\"imageThumb\" src=\"" + e.target.result + "\">" +
                    "<br/><span class=\"remove\"><i class='fa fa-times-circle'></i></span>" +
                    "</span>").insertAfter($(div));
        });
        fileReader.readAsDataURL(f);
    }
    $(div).find(".remove").click(function () {
        $(this).parent(".pip").remove();
    });
});

img {
    max-width: 80px;
    max-height: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="medi">
    <div class="file-upload">
        <input type="file" class="files" name="images[]" multiple="">
        <img src="/upload.png" style="position: relative;top: 11px;height: 16px;width: 16px;margin-left: 8px;">
        <span class="upload-text">Upload</span>
    </div>
</div>

【讨论】：