Jquery .next() not working

Question

I have table structure with the following.

<td class="backgroundimage"><img src="02.jpg" border="0" class="foregroundimage"></td>
<td class="backgroundimage"><img src="03.jpg" border="0" class="foregroundimage"></td>

I am trying to get each img src within my table by doing this.

$('.backgroundImage').each(function(index){
    var oldImage = $(this).next("img").attr('src');

    alert(oldImage);
});

This alerts undefined. What have I done wrong? Am I using .next() wrong?

Answer 1

Yes - .next() looks at the next sibling. And none of your td elements have an img sibling.

You probably wanted to use $(this).find('img') or simply $('img', this).

Depending on what you need to do the following might also do the job:

$('.backgroundimage img').each(function() {
    var oldImage = $(this).attr('src');
});

Answer 2

Instead of:

$(this).next("img")

You should do:

$(this).find("img")

Hope this helps