How can i get link content (innerHTML) and add it to an other link as title

Question

I have div content for posts. The posts exist within a <li> . What I would like to do is take the post title from the link on the item-title class and add it as a title in the link on item-thumbnail class.

This is the html base.

<div class='section' id='popular_posts'>
<div class='widget PopularPosts' id='PopularPosts1'>
<h2>Popular Posts</h2>
<div class='widget-content popular-posts'>
<ul>
<li>
<div class='item-content'>
<div class='item-thumbnail'>
<a href='http://test-abdelghafour.blogspot.com/2013/04/blog-post.html' target='_blank'>
<img alt='' border='0' height='72' src='http://2.bp.blogspot.com/-uDob3fWnp6s/UV3LNbgvp5I/AAAAAAAAAVo/9cVpf154Dao/s72-c/Koala.jpg' width='72'/>
</a>
</div>
<div class='item-title'><a href='http://test-abdelghafour.blogspot.com/2013/04/blog-post.html'>the first post title</a></div>
<div class='item-snippet'>loprem ipsum loprem ipsum loprem ipsum loprem ipsum loprem ipsum loprem ipsum loprem ipsum </div>
</div>
<div style='clear: both;'></div>
</li>


<li>
<div class='item-content'>
<div class='item-thumbnail'>
<a href='http://test-abdelghafour.blogspot.com/2013/03/blog-post_5093.html' target='_blank'>
<img alt='' border='0' height='72' src='http://2.bp.blogspot.com/-rGSydPkoB1Y/UVXpS-SO9ZI/AAAAAAAAAKM/7kTPOiebTlc/s72-c/Lighthouse.jpg' width='72'/>
</a>
</div>
<div class='item-title'><a href='http://test-abdelghafour.blogspot.com/2013/03/blog-post_5093.html'>the second post title</a></div>
<div class='item-snippet'>loprem ipsum loprem ipsum loprem ipsum loprem ipsum loprem ipsum loprem ipsum loprem ipsum loprem ipsum </div>
</div>
<div style='clear: both;'></div>
</li>


<li>
<div class='item-content'>
<div class='item-thumbnail'>
<a href='http://test-abdelghafour.blogspot.com/2013/03/blog-post_5192.html' target='_blank'>
<img alt='' border='0' height='72' src='http://2.bp.blogspot.com/-hwvXxxnUkEI/UVXinrWBGrI/AAAAAAAAAJ8/3JJc9wbSSLA/s72-c/Tulips.jpg' width='72'/>
</a>
</div>
<div class='item-title'><a href='http://test-abdelghafour.blogspot.com/2013/03/blog-post_5192.html'>the third post title</a></div>
<div class='item-snippet'>loprem ipsum loprem ipsum loprem ipsum loprem ipsum loprem ipsum loprem ipsum loprem ipsum loprem ipsum </div>
</div>
<div style='clear: both;'></div>
</li>


<li>
<div class='item-content'>
<div class='item-thumbnail'>
<a href='http://test-abdelghafour.blogspot.com/2013/03/blog-post_29.html' target='_blank'>
<img alt='' border='0' height='72' src='http://4.bp.blogspot.com/-4hpIKXd5iXw/UVXuIC1mCQI/AAAAAAAAAKs/QiMMwRRl0ns/s72-c/Desert.jpg' width='72'/>
</a>
</div>
<div class='item-title'><a href='http://test-abdelghafour.blogspot.com/2013/03/blog-post_29.html'>the forth post title</a></div>
<div class='item-snippet'>loprem ipsum loprem ipsum loprem ipsum loprem ipsum loprem ipsum loprem ipsum loprem ipsum loprem ipsum </div>
</div>
<div style='clear: both;'></div>
</li>

</ul>

</div>
</div>
</div>

this is the jQuery code that i use.

$('#popular_posts .item-title a').each(function(){
var pptitle = $('#popular_posts .item-title a').text();
$('.item-thumbnail a').each(function(){
$(this).attr('title', pptitle);
});
});

the result that i want to get for each link.

<a href='http://test-abdelghafour.blogspot.com/2013/04/blog-post.html' target='_blank' title="the forth post title">

Answer 1

The var pptitle = $('#popular_posts .item-title a').text(); call inside the each loop will select the same text node each loop iteration. And the second each loop will set that text to every .item-thumbnail .

This should do what you want:

$("#popular_posts li").each(function(){
  var pptitle = $(this).find(".item-title a").text();
  $(this).find(".item-thumbnail a").attr("title", pptitle);
});