Question

I have created a list, where each list item contains an image and a title. I now want the image alt and title tags to be the same as the title in the list item, but I can’t get it to work properly. At the moment, I get all titles into all img tags (which is to be expected from my js), but I can’t work out how to get the first $('ul li img') to only pick up the first $('ul li').text(), and the second to pick up the second $('ul li').text(), etc.

The HTML:

<ul>
<li><img src="path.jpg" /><p>Title 1</p></li>
<li><img src="path.jpg" /><p>Title 2</p></li>
</ul>

The JS:

$(document).ready(function() {
$('ul li img').each(function() {
    var valueTitle = $('ul li').text();
    $(this).attr({
        alt: valueTitle,
        title: valueTitle
    });
});
}); 

Answer 1

<p> element follows every <img>, so:

$("ul li img").each(function() {
    var $this = $(this),
        valueTitle = $this.next("p").text();

    $this.attr({
        alt: valueTitle,
        title: valueTitle
    });
});

DEMO: http://jsfiddle.net/cquJX/