jQuery display image title in span tag

Question

Hi,

I have a unordered list being shown - each li tag contains an image with an empty span tag under it. I want the title attribute of the image to display in the span tag. I am using this below and it works, but it shows the titles from ALL images in the first span tag... I need to somehow make sure the title from the image goes in its own span tag. I guess I need a way to have a unique ID for each li or each li img...

$(document).ready(function() {
    $('#pressThumbs li img').fadeIn(function() {
        var $this = $(this);
        $("#description").append($(this).attr('title'));
    });
});

Thanks

Rob

Answer 1

IDs must be unique. As such, you can only have one description id on the page.

Change the ID description to a class instead, and do this:

Try it out: http://jsfiddle.net/gsFnW/

$(document).ready(function() {
    $('#pressThumbs li img').fadeIn(function() {
        var $this = $(this);
        $this.next('.description').append($this.attr('title'));
    });
});

• http://api.jquery.com/next/

Please note that this assumes the <img> and the <span> are next to each other. I can't say for sure without seeing your markup. If there's another element in between, do this instead.

$(document).ready(function() {
    $('#pressThumbs li img').fadeIn(function() {
        var $this = $(this);
        $this.siblings('.description').append($this.attr('title'));
    });
});

• http://api.jquery.com/siblings/

Answer 2

Assuming this markup

<ul>
   <li><img src="bla" title="sometitle" /><span class="description" /></li>
   <li><img src="bla" title="sometitle" /><span class="description" /></li>
</ul>

This should work.

$(document).ready(function() 
 { 
     $('#pressThumbs li img').fadeIn(function() 
     { 
          var $this = $(this); 
          $this.siblings(".description").html($this.attr('title')); 
     }); 
 });

You're problem is that you are using an id attribute #decription which can only appear on a single dom item. Instead use a class which can appear and many.

Hope this helps.