将图片添加到列表

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)）