Изображения не будут отображаться после очистки содержимого

Question

Я новичок, использующий jquery и js, так что, возможно, именно поэтому я просто не могу понять, почему мой код не работает.

Я создал эту функцию createList, чтобы поместить содержимое изображения вэлемент div.(эта часть прекрасно работает) Итак, я хочу создать элемент ведьма, в котором хранится каждое изображение, и после того, как я удалил содержимое элемента ведьмы, будет содержать этот «держатель изображения», код вставит его.Но!Я делаю это так, мой результат - ничто:

var createList = function(){
                var imgList = $("<div />").attr({'id': 'imgs'});
                $.getJSON("<?php echo base_url().'gallery/json/'.$this->uri->segment(3); ?>",function(data){
                    $.each(data, function(i,item){
                        var rowContent = $("<img/>").attr({"src": item.src, "style": "width: 130px; padding: 10px;"});
                        rowContent.appendTo("#imgs");
                    });
                    $('#s20').html('');
                    imgList.css({"visibility": "visible", "height": "auto"}).appendTo('#s20');
                });
            }

Так в чем же проблема, как я могу сделать это лучше?Есть предложения?

Answer 1

Вы еще не добавили imgList в DOM, поэтому вы не можете выбрать его с помощью селектора #imgs. Однако вы можете напрямую использовать переменную imgList.

Эта строка:

rowContent.appendTo("#imgs");  // Fails because #imgs is not yet part of the DOM

должно быть:

rowContent.appendTo(imgList);  // Use existing reference to the element