Добавить изображения в список - PullRequest
Новая
       19

Добавить изображения в список

0 голосов
/ 18 марта 2011

У меня есть следующий вызов 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');

                 }
             }
         });

Как вы можете видеть в конце, я добавляю изображения к идентификатору: 

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

Вместо этого я хотел бы добавить его в список, каждое изображение на лите: 

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

Я в замешательстве и мне нужна ваша помощь ... Заранее спасибо.

1 Ответ

1 голос
/ 18 марта 2011 
$.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))
...