Question

I’m a newbie using jquery and js either, so maybe thats the reason why i just cant undesrand why my code isn’t working.

I created this function createList to push image content into div element. (this part works great)
So what i want to do is, creating an element witch holds every picture and after i have deleted the content of the element witch will contain this “image holder”, the code inserts it. But! I i do it like this, my result is nothing:

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

So whats the problem, how could i make this better? Any suggestions?

Answer 1

You haven’t added the imgList to the DOM yet, so you can’t select it with a #imgs selector. You can, however use your imgList variable directly.

This line:

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

should be:

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