將圖片添加到列表

Question

我有采取相對用戶的所有圖像以下Ajax調用：

$.ajax({ 
      type: "POST", 
      url: "../../Services/Registration.svc/GetAllImagesUrls", 
      data: '{"idImg" : ' + idImg + '}', 
      contentType: "application/json", 
      dataType: "json", 
      success: function (response) { 
       ClearContents(); 
       var images = response.d; 
       for (var i = 0; i < images.length; i++) { 
        var imageUrl = images[i].ImageUrl; 
        var isDefault = images[i].IsDefault; 
        var fileName = images[i].FileName; 
        var idImage = images[i].IdImage; 
        var imageClass = 'userImage'; 
        if (isDefault == true) 
         imageClass = imageClass + ' defaultImage'; 
        $(document.createElement("img")).attr({ src: imageUrl, filename: fileName, imageKey: idImage , class: imageClass}).appendTo('#userImagesContainer'); 

       } 
      } 
     }); 

正如你可以在最後看到我的圖像追加到ID：

$(document.createElement("img")).attr({ src: imageUrl, filename: fileName, imageKey: idImage , class: imageClass}).appendTo('#userImagesContainer'); 

相反，我想將它添加到一個列表，每個圖像上的李：提前

<ul> 
    <li>img01</li> 
    <li>img02</li> 
    [etc...] 
</ul> 

我很困惑，我需要你的幫助...謝謝。

Answer 1

$.ajax({ 
    type: "POST", 
    url: "../../Services/Registration.svc/GetAllImagesUrls", 
    data: '{"idImg" : ' + idImg + '}', 
    contentType: "application/json", 
    dataType: "json", 
    success: function(response) { 
     ClearContents(); 
     var images = response.d, 
      len = images.length, // 1 
      $ul = $('<ul></ul>'), 
      $li; 
     for (var i = 0; i < len; i++) { 
      var imageUrl = images[i].ImageUrl; 
      var isDefault = images[i].IsDefault; 
      var fileName = images[i].FileName; 
      var idImage = images[i].IdImage; 
      var imageClass = 'userImage'; 
      if (isDefault) imageClass = imageClass + ' defaultImage'; // 2 
      $('<img></img>', { // 3, 4 
       src: imageUrl, 
       filename: fileName, 
       imageKey: idImage, 
       class: imageClass 
      }).appendTo($ul); 

     } 
     $ul.find('img').wrap('<li></li'); 
     $ul.appendTo('#userImagesContainer'); 
    } 
}); 

代碼清理：

1. 保存images.length，否則將在每個計算通過循環
2. 沒有必要進行明確的測試對true或false
3. 沒有必要使用document.createElement然後jQuery-ify它。
4. 沒有必要使用.attr()（見jQuery(html, props)）