javascript - 追加到同一个div

Question

我现在在使用 Jquery/Dropzone 时遇到了这个问题。在我使用 dropzone 添加图像后，它会上传图片并添加一个 div，在这个 div 内我附加一个隐藏的输入字段。问题是当我上传另一个图像时，它会将第二个图像的隐藏输入字段添加到两个 div 中。我希望我说清楚了!

这是我的 Jquery 代码，将在上传图像后执行:

// on success add a hidden field with the img path
myDropzone.on("success", function(file, response) {
  console.log(response);
  $('<input>').attr({
    type: 'hidden',
    name: 'img_path',
    id: 'uploadedImg',
    value: response
  }).appendTo('.action-buttons').next();
});

这是应该附加的 html:

    <!-- dropbox -->
<div class="box box-primary">
    <div class="box-body upload-form">
        <h5>Voeg afbeeldingen toe aan uw filiaal.</h5>
        <!-- The fileinput-button span is used to style the file input field as button -->
        <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Voeg afbeeldingen toe...</span>
        </span>

        <button type="reset" class="btn btn-warning cancel">
            <i class="glyphicon glyphicon-ban-circle"></i>
            <span>Anuleer upload</span>
        </button>

        <!-- The global file processing state -->
        <span class="fileupload-process">
            <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0"
                 aria-valuemax="100" aria-valuenow="0">
              <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
            </div>
        </span>


        <div class="table table-striped files" id="previews">
            <div id="template" class="file-row">
                <!-- This is used as the file preview template -->
                <div>
                    <span class="preview"><img data-dz-thumbnail/></span>
                </div>
                <div>
                    <p class="name" data-dz-name></p>
                    <strong class="error text-danger" data-dz-errormessage></strong>
                </div>
                <div>
                    <p class="size" data-dz-size></p>
                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0"
                         aria-valuemax="100" aria-valuenow="0">
                        <div class="progress-bar progress-bar-success" style="width:0%;"
                             data-dz-uploadprogress></div>
                    </div>
                </div>
                <div class="action-buttons">
                    <button class="btn btn-primary start">
                        <i class="glyphicon glyphicon-upload"></i>
                        <span>Start</span>
                    </button>
                    <button data-dz-remove class="btn btn-warning cancel">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        <span>Cancel</span>
                    </button>
                    <button data-dz-remove class="btn btn-danger delete dz-remove">
                        <i class="glyphicon glyphicon-trash"></i>
                        <span>Delete</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

我不知道如何将正确的输入字段附加到正确的div，我希望有人可以帮助我!

Answer 1

'.action-buttons' 将选择所有带有 class="action-buttons" 的元素。如果有两个，则两个都会被选中。三、四、五都一样，无论有多少个。 .append() 会将重复的内容附加到所有。

您只需选择一个感兴趣的元素，我猜测是 :last .

尝试

}).appendTo($('.action-buttons').filter(":last"));