Javascript 附加到同一分区

目前我对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，我希望有人能帮助我

“.action buttons”将选择class=action按钮的所有元素。如果有两个，将同时选择两个。三个、四个、五个都一样，不管有多少。And.append会将重复的内容追加到所有这些内容中

你只需要选择一个感兴趣的元素，我要说的是

试一试

---

从我的理解和所说的，你只想在第一个div上这样做

myDropzone.on("success", function(file, response) {
  console.log(response);
  $('.action-buttons : first').append('<input type="hidden" name="img_path" id="uploadedImg" value="'+ response +'"></input>');
});

---

正如我在评论中所说，你必须为此选择一个特定的div，所以选择id。

请显示你的html，最好做一个fiddle。显然，如果你要附加到一个类，它将附加到所有div，除非你索引特定的div。请使用id。通读这一期。它有一些评论是helpful@AakashVerma谢谢你，我想这会解决我的问题！解释得很好。谢谢@AakashVerma。当然，你可能是对的，它应该是：第一，而不是：最后。我们真的不知道。如果是随机的-首先/中间/最后-那么我们需要重新思考！这当然不是一个问题，但我明白你的意思。相信我，如果它是随机的，那就是愚蠢的——我们不需要对此进行重大反思：如果它始终是最后一项，那么这是可行的，但有时情况并非如此。我现在得到了我想要的正确元素，但是出于某种原因dropzone不允许我发布任何东西，除了_标记..我一定是遗漏了什么。在演示中，最新删除的文件总是最后一个，我无法找到一个配置选项来改变这一点。

myDropzone.on("success", function(file, response) {
  console.log(response);
  $('.action-buttons : first').append('<input type="hidden" name="img_path" id="uploadedImg" value="'+ response +'"></input>');
});