Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder logictrap's Avatar
    Join Date
    Apr 2008
    Posts
    155
    Thanks
    11
    Thanked 3 Times in 3 Posts

    Need help cuz I don't get 'this'

    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:

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

    Code:
        $('#output').html("ID: " + this.id);
    This does not:

    Code:
    $('#output').html("SRC: " + this.img.src);
    How do I get the contents of the img.src attribute'?

    Which came first - the chicken or the egg? The egg... [ticket closed]
    If a tree falls... does it make a sound? Yes.............. [ticket closed]

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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.

  • #3
    Regular Coder Iszak's Avatar
    Join Date
    Jun 2007
    Location
    Perth, Western Australia
    Posts
    332
    Thanks
    2
    Thanked 58 Times in 57 Posts
    Well presuming "this" is the DOM #div1 and you're using jQuery, you can access the image via
    Code:
    $(this).children('img')
    and then access the attribute via attr('src') e.g.
    Code:
    $('#test1').click(function(){
      var img = $(this).children('img').
    
      $('#output').html("Source: " + img.attr('src'));
    });
    Untested though.

  • #4
    Regular Coder logictrap's Avatar
    Join Date
    Apr 2008
    Posts
    155
    Thanks
    11
    Thanked 3 Times in 3 Posts
    Thanks - that worked (I'm using jQuery). This also worked:

    Code:
    $('#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:

    Code:
    <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

    Which came first - the chicken or the egg? The egg... [ticket closed]
    If a tree falls... does it make a sound? Yes.............. [ticket closed]

  • #5
    Regular Coder Iszak's Avatar
    Join Date
    Jun 2007
    Location
    Perth, Western Australia
    Posts
    332
    Thanks
    2
    Thanked 58 Times in 57 Posts
    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.

    Code:
    $(this).find('img').attr('src');
    But when you know it's a child, use children as it's a lot faster than find.

  • Users who have thanked Iszak for this post:

    logictrap (06-16-2009)

  • #6
    Regular Coder logictrap's Avatar
    Join Date
    Apr 2008
    Posts
    155
    Thanks
    11
    Thanked 3 Times in 3 Posts
    Thank you!

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

    Which came first - the chicken or the egg? The egg... [ticket closed]
    If a tree falls... does it make a sound? Yes.............. [ticket closed]


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •