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
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'));
});
});
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'));
});
});
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.