element $(this) output different format in console.log

Question

I'm looping through elements with the same class name and printing the element using console.log as follows:

$('.thumbImg').each(function(i) {
  console.log("i is", i, "this is", this);
});

However the console.log 's output is unexpected, changing at random between the following formats:

i is 13 this is img.thumbImg
i is 14 this is <img class=​"thumbImg" src=​"images/​bookcovers/​jekyllhyde.jpg" alt>​

The preferred format is the second full element output.

Here is a screenshot of my console:

I think this is causing problems with loading these images later in my program, could anyone point me in the right direction to a fix?

Answer 1

You can use :

$('.thumbImg').each(function(key,element) {
alert("i is "+ key+ " this is "+ element.outerHTML);
});

An example here: jsFiddle

Answer 2

What are you trying to print out in the console?

Try something like this:

$('.thumbImg').each(function(i) {
    console.log("i is", i, "this is", $(this));
});

Or maybe a attr?

$('.thumbImg').each(function(i) {
    console.log("i is", i, "this is", $(this).attr('src'));
});

Make sure you have this wrapped around it so the site can load first then loop through your images.

$(document).ready(function() { 
    /* code here */ 
});