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