在 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);        }        });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引用输入，所以你需要找到最近的 .file-upload父母，你可以使用父母但你需要保持那个结构（我更喜欢最近）

不要在 for-loop 中添加事件，因为如果您选择 3 个文件，您的第一个文件remove element将有 3 个点击事件，第二个有 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>