jQuery - 從圖像獲取標題並將其放在單獨的標籤上（每個）

Question

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

那麼這是我的代碼，它的工作原理，但我並不真正熟悉每個標籤。

當前所有這些都適用於所有a.play標籤的第一個「標題」。

我想要實現的是從每個圖像獲得標題並將其應用於相關的a.play按鈕。

這裏的HTML，如果這是任何幫助理解：

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

概括起來，代碼已經生成的所有標題的標籤，但只產生了第一個冠軍，並將其應用於所有的標籤，我需要在整個頁面的每個圖像的標題適用於特定區域的標籤。

任何想法？

Answer 1

我想你可能會迭代錯誤的元素。

這聽起來像你可能想迭代每個投資組合圖片。 從圖像中抓取標題。 查找帶有班級形象的div以便查找包含的玩類 然後應用該屬性。

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

會發現每個圖像，並通過每一個迭代。每次迭代都會得到父項（在本例中爲div.info），並在其中找到任何a.play，並將該標題設置爲圖像標題。請注意，匹配集「a.play」上的attr（）只會在第一個匹配項上運行 - 假設每個圖像只有一個播放按鈕，這樣可以。

您可能還需要考慮給予原始圖像的所有類，讓你可以將代碼更改爲類似：

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

或者你可以這樣做：

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

哪會而是查找每個播放鏈接，然後搜索適當的圖像（而不是查找圖像並搜索播放鏈接）。再次，這將假設您將「mybutton」類添加到圖像。