Question

I have populated an array with a few html image tags that I have created. I’m trying to get the contents of that array to appear as the actual images on the page with the following code:

 $(document).ready(function(){        //populates array with images
        var shipImgs = $("#thumb_slider").children().each(function(index, element) {
            var newImg = $("<img />").attr({src: this.src, alt: 'space'}).addClass(index == 0 ? "middle_slot" : (index == 1 ? "left_slot" : "right_slot"));
            imgArr.push(newImg);
        });

and then after a button on the page is clicked, it calls a function which should display the images in a div called basic_div with the following line of code:

$("#basic_div").html(imgArr[b] + imgArr[a] + imgArr[c]);

Instead of seeing the images, all you get is [object Object] when the array is displayed. What is the correct way to “translate” this from a jquery object to actual html code to display the images? If you need to see it in action you can find it here: http://www.digitalbrent.com/lab and then press the increase button. Thanks!

Answer 1

The .html function takes a string. You are passing it objects (or at least you are passing it the dubious ‘summation’ of objects). So you need to either build your array with literal strings for the img tags (and attributes), or do something like the following:

var newImg = $("<img>");
newImg.attr('src', "tiffany-joy-10.jpg");
newImg.appendTo('#mydiv')

I tested it and it works (and she looked good :).