Getting the Image Source from an HTMLImageElement object

Question

I have the following jQuery which I want to output a list of images. The problem is that I cannot get 'this' to find the source. It currently is an object which outputs as an HTMLImageElement. How can I get the image source from this object?

$("#imgs li.images img").each(function(i) { 
    $("#list").append("<li><img src=\""+this.attr("src")+"\" /></li>");
});

I currently get the error that this.attr is not a function.

Answer 1

this is the DOMNode, not a jQuery object. You can access this.src immediately, or, if you want to use jQuery, $(this).attr('src'), although would be a detour for doing the same thing.

Answer 2

Use $(this) instead of this.

Answer 3

The problem is your use of 'this'. It is a special keyword used in object orientated programming to refer to an objects own properties