CODEWITHSUNDEEP
jquery
3gwebtrain
3gwebtrain

Reputation: 15301

jQuery map function append the image element as object

this is my function :

var listImg = params.list.find('img'), naviHtml = '<ul>';

$.map ( listImg, function ( img, i ) {

        naviHtml += '<li>'+ img + '</li>'
        //naviHtml += '<li><img width=150 height=50 src=' + $(img).attr('src') + '></li>'

    })

    naviHtml += '</ul>'

    console.log(naviHtml);

when i console or append to body element, it giving the result as like this:

<ul><li>[object HTMLImageElement]</li><li>[object HTMLImageElement]</li><li>[object HTMLImageElement]</li><li>[object HTMLImageElement]</li><li>[object HTMLImageElement]</li><li>[object HTMLImageElement]</li><li>[object HTMLImageElement]</li><li>[object HTMLImageElement]</li></ul>

since i am not getting the images, how can i make the htmlimageElement object to html regular element?

Upvotes: 0

Views: 624

Answers (2)

Tomalak
Tomalak

Reputation: 338248

var listImg = params.list.find('img'), 
    $navi = $('<ul>');

$.each( listImg, function (img, i) {
  $('<li>').append(img).appendTo($navi);
});

console.log( $navi.html() );

Upvotes: 3

Thomas
Thomas

Reputation: 8849

By creating a tag and setting the attributes:

naviHtml += '<li><img width="'+img.width+'" height="'+img.height+'" src="'+img.src+'" /></li>';

Upvotes: 0

Related Questions