appendTo同じdiv

Question

私はこの時点でJquery/Dropzoneにこの問題があります。私はdropzoneで画像を追加した後、画像をアップロードしてdivを追加します。このdivの中に隠れた入力フィールドを追加します。問題は、別の画像をアップロードして、2つ目の画像から非表示の入力フィールドを両方の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(); 
}); 

これは、それがappendToすべき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"ですべての要素を選択します。 2つがある場合は、両方が選択されます。 3人、4人、5人とも同じですが同じです。 .append()は、すべてのに重複コンテンツを追加します。

興味のある要素だけを選択する必要があります。これは、ギャザリングするのは:lastです。

私がコメントで言ったように、あなたが選択する必要があり、私は理解し、あなただけの最初の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>'); 
}); 

のようなものを

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

Answer 2

をお試しください特定の事業部のためにはidの代わりに行ってください。