jQuery - Obtenir le titre d'une image et le mettre sur une étiquette séparée (chacun)

Question

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

Eh bien, il y a mon code, ça marche mais je ne connais pas vraiment chaque étiquette.

Tout ce qui est actuellement applique le premier 'ptitle' à toutes les balises a.play. Ce que j'essaie de réaliser est d'obtenir le titre de chaque image et de l'appliquer uniquement au bouton a.play correspondant.

est ici le code html si cela est de toute aide à comprendre:

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

Pour résumer, le code génère déjà tous les titres à une étiquette, mais ne génère que le premier titre et l'applique à tous les tags a, j'ai besoin des titres de chaque image dans la page pour appliquer à un tag dans la zone spécifique.

Des idées?

Answer 1

Je pense que vous êtes en train de répéter le mauvais élément.

Il semble que vous souhaitiez effectuer une itération sur chacune des images du portefeuille. Récupérez le titre de l'image. Recherchez la div avec l'image de classe afin de trouver la classe de jeu contenue Ensuite, appliquez l'attribut.

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

trouverais chacun de vos images et itérer chacun. Chaque itération obtiendrait l'élément parent (dans ce cas le div.info) et trouverait un a.play dedans et placerait ce titre au titre des images. Notez que attr() sur l'ensemble assorti "a.play" ne fonctionnera que sur le premier élément correspondant - en supposant qu'un seul bouton de lecture par image et ce serait bien.

Vous pouvez également envisager de donner les images d'origine une classe pour que vous puissiez changer le code à quelque chose comme:

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

Alternativement, vous pouvez le faire:

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

Ce qui serait à la place, trouvez chacun des liens de jeu, puis recherchez l'image appropriée (au lieu de trouver l'image et de chercher les liens de lecture). Encore une fois, cela suppose que vous avez ajouté la classe "mybutton" aux images.