Need help cuz I don't get 'this'

[logictrap]

I need to get the attribute of an img object that is a sub element of 'this' but I can't figure out how to traverse 'this' to get there.

The contents of 'this' are:

<div id="test1"><img src="images/beach1.jpg" width="200" height="200" alt="beach" /></div>

this works:

    $('#output').html("ID: " + this.id);

This does not:

$('#output').html("SRC: " + this.img.src);

How do I get the contents of the img.src attribute'?

[ohgod]

is that jquery?

in prototype there are a series of functions for walking the dom. i imagine jquery would have something comparable. look up the api docs.

[Iszak]

Well presuming "this" is the DOM #div1 and you're using jQuery, you can access the image via

$(this).children('img')

and then access the attribute via attr('src') e.g.

$('#test1').click(function(){
  var img = $(this).children('img').

  $('#output').html("Source: " + img.attr('src'));
});

Untested though.

[logictrap]

Thanks - that worked (I'm using jQuery). This also worked:

$('#output').html('SRC: ' + $(this).children('img').attr('src'));

Just one more question - I don't understand how to use children completely because I have another example where I need the img.src attribute when 'this' contains:

<div class="logo"> 
   <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
       <td height="170" align="center" valign="middle">
            <img src="images/somelogo.gif" /><br /> 
            <a href="http://www.test.org" target="_blank">Test Logo</a>
      </td> 
    </tr> 
   </table> 
 </div>

Thanks

[Iszak]

In this case children will not work, as children refers to only one level down to the element, so for example the children in your example above would be the table, so to go further you'd use "find" such as.

$(this).find('img').attr('src');

But when you know it's a child, use children as it's a lot faster than find.

[logictrap]

Thank you!

I would have spent another 10 hours trying to use children to do this.