Как выбрать предварительный элемент

Question

У меня есть форма для загрузки, в которой используется новый атрибут, и я сделал форму загрузки ajax, чтобы сделать вещи более удобными для пользователя. Моя проблема заключается в том, что я пытаюсь обновить проценты для всех этих файлов, которые загружаются и добавляются в div, вместо того, чтобы обновлять один процент, все они обновляются из последнего файла. Вот какой код.

$('#File').change(function(event) { 
     for(I = 0; I < this.files.length; I++) 
     { 
      var Name = this.files[I].name; 
      var Size = this.files[I].size; 
      var Type = this.files[I].type; 

      $('#UploadContent').prepend('<div class="UploadLabel" style="width:60%;">'+Name+'</div><div class="UploadLabel UploadPercent" style="width:10%;">0%</div><div class="UploadLabel" style="width:15%;">N/A</div><div class="UploadLabel" style="width:15%;">'+Type+'</div>'); 
      var Data = new FormData(); 
      Data.append('File[]', this.files[I]); 
      var Request = new XMLHttpRequest(); 
      Request.upload.addEventListener('progress', function(event){ 
       if(event.lengthComputable) 
       { 
        var Percent = event.loaded/event.total; 
        var Progress = $('#UploadContent').find('.UploadPercent'); 
        $(Progress).text(Math.round(Percent * 100) + '%'); 
       } 
      }); 
      Request.upload.addEventListener('load', function(event) { 
     }); 

      Request.open('POST', '/Home/Upload/Upload.php'); 
      Request.setRequestHeader('Chache-Control', 'no-cache'); 
      Request.send(Data); 
      $('#UploadModal').fadeIn('fast'); 
     } 
    }); 

теперь, как вы можете видеть в ходе слушателя мой

var progress = $('#UploadContent').find('.UploadPercent'); 

как бы я выбрать файл, который должен быть обновлен правильно. Если кто-то может найти совершенно другой метод, чтобы изменить процент, который тоже будет большим! - Благодаря!

Answer 1

Когда вы предваряя, добавить новый, специфический class (да, вы могли бы использовать id, но я бы просто придерживаться class) до .UploadPercent элемента:

$('#UploadContent').prepend('<div class="UploadLabel" style="width:60%;">'+Name+'</div><div class="UploadLabel UploadPercent UploadTarget' + I + '" style="width:10%;">0%</div><div class="UploadLabel" style="width:15%;">N/A</div><div class="UploadLabel" style="width:15%;">'+Type+'</div>'); 
// LOOK HERE----------------------------------------------------------------------------------------------------------------------^ HERE 

И когда ты» повторное прицеливание, используйте:

var progress = $('#UploadContent').find('.UploadTarget' + I); 

Потому что вам нужно значение I быть точными на основе того, где вы находитесь в цикле, вам нужно использовать замыкание, а также. Так что ваш код будет в конечном итоге выглядит как:

$('#File').change(function(event) { 
    for(I = 0; I < this.files.length; I++) { 
     (function (I) { 
      // Your current code inside the for loop 
     })(I); 
    } 
}); 

Хотя пример сверху, безусловно, вариант, вероятно, имеет более отправляются только сохранить ссылку на вновь вставленный элемент и не должен иметь дело с новым class и I, а затем использовать его позже.

Вот окончательный код, который я хотел бы использовать:

http://jsfiddle.net/MeL7L/2/

$("#File").on("change", function (event) { 
    for (var i = 0; i < this.files.length; i++) { 
     (function (curFile, i) { 
      var Name = curFile.files[i].name; 
      var Size = curFile.files[i].size; 
      var Type = curFile.files[i].type; 

      var newEl = ""; 
      newEl += '<div class="UploadLabel" style="width:60%;">' + Name + '</div>'; 
      newEl += '<div class="UploadLabel UploadPercent" style="width:10%;">0%</div>'; 
      newEl += '<div class="UploadLabel" style="width:15%;">N/A</div>'; 
      newEl += '<div class="UploadLabel" style="width:15%;">' + Type + '</div>'; 
      newEl = $(newEl); 
      $("#UploadContent").prepend(newEl); 
      var Data = new FormData(); 
      Data.append("File[]", curFile.files[i]); 
      var Request = new XMLHttpRequest(); 
      Request.upload.addEventListener("progress", function (event){ 
       if (event.lengthComputable) { 
        var Percent = event.loaded/event.total; 
        var Progress = newEl.find(".UploadPercent"); 
        Progress.text(Math.round(Percent * 100) + "%"); 
       } 
      }); 
      Request.upload.addEventListener("load", function(event) {}); 

      Request.open("POST", "/Home/Upload/Upload.php"); 
      Request.setRequestHeader("Cache-Control", "no-cache"); 
      Request.send(Data); 
      $("#UploadModal").fadeIn("fast"); 
     })(this, i); 
    } 
});