appendTo 동일한 div

Question

나는 지금 Jquery/Dropzone에이 문제가있다. 내가 dropzone과 함께 이미지를 추가 한 후에 그림을 업로드하고 div를 추가합니다.이 div 안에 숨겨진 입력 필드를 추가합니다. 문제는 두 번째 이미지의 숨겨진 입력 필드가 두 div에 추가되는 다른 이미지를 업로드 할 때입니다. 나는 분명히 희망한다!

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

내가 오른쪽 입력을 추가하는 아무 생각이 :

// 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을 appendTo가해야입니다 : 여기

은 이미지가 업로드 된 후 실행됩니다 내 jQuery 코드입니다 필드 오른쪽 div, 나는 누군가가 나를 도울 수있는 희망!

Answer 1

'.action-buttons'은 class="action-buttons"으로 모든 요소를 ​​선택합니다. 두 개가있는 경우 두 개가 모두 선택됩니다. 3 명, 4 명, 5 명은 동일하지만 많은 사람들이 있습니다. 그리고 .append()은 에 모두 중복 콘텐츠를 추가합니다. 모두입니다.

내가 관심을 갖고있는 요소 중 하나만 선택해야합니다. 즉, :last입니다. 이

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

을 시도하고 당신이 첫 번째 DIV에하고 싶은 말, 뭔가 내가 의견에 말했듯이, 당신은을 선택해야 특정 사업부에 대해서는 id 대신 찾으십시오.