jQuery - obtendo o título de uma imagem e colocá -la em uma tag separada (cada)

Question

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

Bem, aí está o meu código, ele funciona, mas não estou realmente familiarizado com a tag.

Tudo isso faz atualmente se aplica o primeiro 'ptitle' a todas as tags A.Play.

O que estou tentando alcançar é obter o título de cada imagem e aplicá -lo apenas ao botão A.Play relevante.

Aqui está o HTML se isso é de ajuda para entender:

<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>

Para resumir, o código já gera todos os títulos para a tag A, mas apenas gera o primeiro título e o aplica a todas as tags A, eu preciso dos títulos de cada imagem em toda a página para aplicar à tag A na tag na tag na tag no The the área especifica.

Alguma ideia?

Answer 1

Eu acho que você pode estar iterando o elemento errado.

Parece que você pode querer iterar sobre cada uma das imagens do portfólio. Pegue o título da imagem. Procure o Div com a imagem da classe para encontrar a classe de reprodução contida e aplique o atributo.

$('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'));
});

Encontraria cada uma de suas imagens e iteraria através de cada uma. Cada iteração obteria o item pai (neste caso, o div.info) e encontraria qualquer A.Play dentro dele e definirá esse título com o título das imagens. Observe que o att () no conjunto correspondente "A.Play" será executado apenas no primeiro item correspondente-assumindo apenas um botão de reprodução por imagem e isso ficaria bem.

Você também pode considerar dar às imagens originais uma aula para que você possa alterar o código para algo como:

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

Como alternativa, você pode fazer isso:

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

O que encontraria cada um dos links de reprodução e, em seguida, procuraria a imagem apropriada (em vez de encontrar a imagem e pesquisar os links de reprodução). Novamente, isso seria assumir que você adicionou a classe "MyButton" às imagens.