javascript - 在 insertAfter() 中使用 $(this).find ('class' )

Question

我有以下代码来查看在<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);
        }
        });

类(class)file-upload单击按钮即可复制。所以我想像这样定位当前的 div insertAfter($(this).find(".file-upload")) ？那行得通吗？我尝试这样做，但没有用。我怎样才能做到这一点？

我尝试使用 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>

此部分重复。

Answer 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>