如何選擇預加元素

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); 
    } 
});