jQuery - Getting the title from an image and putting it on a seperate a tag (each)

Question

$(function () {
    var ptitle = $('div.portfolioItem div.image img').attr("title");
    $(this).each(function () {
        $('a.play').attr({
            'title': '' + ptitle + ''
        });
    });
});

Well there's my code, it works but I'm not really familiar with the each tag.

All this does currently is applies the first 'ptitle' to all of the a.play tags.

What I'm trying to achieve is to get the title from each image and apply it to only the relevant a.play button.

Here's the html if this is of any help to understand:

<figure class="oneThird">
    <div class="portfolioItem">
        <div class="image">
            <!-- This is the image -->
            <img src="images/portfolio-item-2.jpg" alt="portfolio item" title="test2" />
            <div class="info">
                <p> Alright, go to the link Andrew propose. Download the file. 
                    You need to add it to your project. You can still have 
                    jquery.effects.core this is why this is random fill to 
                    take space.
                </p>
                <span class="base">
                    <!-- Add the img title to the <a class="play"> below -->
                    <a href="images/header-image-2.jpg" rel="prettyPhoto[portfolio]" class="play"></a>
                    <a href="#" class="view">View Project</a>
                </span>
            </div>
        </div>
    </div>
    <h3>
        <a href="#">This is a portfolio item</a>
    </h3>
    <ul class="tags">
        <li><a href="#">Web</a>, </li> 
        <li><a href="#">Print</a>, </li> 
        <li><a href="#">Design</a></li> 
    </ul> 
</figure>

To sum it up, the code already generates all the titles to the a tag, but only generates the first title and applies it to all the a tags, I need the titles of each image throughout the page to apply to the a tag in the specific area.

Any ideas?

Answer 1

I think you may be iterating over the wrong element.

It sounds like you might want to iterate over each of the portfolio images. Grab the title from the image. Look for the div with class image in order to find the contained play class Then apply the attribute.

$('div.portfolioItem div.image img').each( function(idx,img) {
    var pTitle = img.title;
    $('a.play', $(img).parent('.image')).attr('title',pTitle);
});

Answer 2

$('div.portfolioItem div.image img').each(function () {
    $(this).parent().find('a.play').attr('title', $(this).attr('title'));
});

Would find each of your images and iterate through each one. Each iteration would get the parent item (in this case the div.info) and find any a.play within it and set that title to the images title. Note that attr( ) on the matched set "a.play" will only run on the first matched item--assuming only one play button per image and this would be fine.

You may also want to consider giving the original images all a class so that you could change the code to something like:

$('img.mybutton').each(function () {
    $(this).parent().find('a.play').attr('title', $(this).attr('title'));
});

Alternately you could do this:

$('a.play').each(function () {
    this.title = $(this).parents('div.image').find('img.mybutton').attr('title');
});

Which would instead find each of the play links and then search for the appropriate image (instead of finding the image and searching for the play links). Again this would be assuming you added the "mybutton" class to the images.