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);
});