getting rel attr of link and using as text recurring

I'm trying to get the rel attr from a set of links in a slider, to then use as the text for the control. I've got it working except it only lists the first rel multiple times, instead of multiple rels once.

My jQuery is

jQuery("#slider li a").each(function() {

    var yearValue = $(this).attr('rel');

jQuery('#controls li a').text(yearValue);
});

and the output html is

 <div id="slider">
  <ul>
    <li><a rel="foo" href="#"><img src="image1.jpg" alt="alt" /></a></li>
    <li><a rel="bar" href="#"><img src="image2.jpg" alt="alt" /></a></li>
  </ul>
</div>
<ol id="controls">
  <li id="controls1" class="first"><a href="javascript:void(0);" rel="0">foo</a></li>
  <li id="controls2" class="current"><a href="javascript:void(0);" rel="1">foo</a></li>
</ol>    

I need to the ol to have foo and bar, not foo and foo

Any ideas? Much appreciated

Answers


try this,

jQuery("#slider li a").each(function() {

    var index = $(this).parent().index();
    var yearValue = this.rel;

    jQuery('#controls li').eq(index).find('a').text(yearValue);

});

Nice Demo


Need Your Help

How can I make my view shrink and disappear?

iphone cocoa-touch uiview uiviewcontroller core-animation

When my user presses a button, I want the visible view to shrink and disappear, revealing the parent view underneath. Currently I have this, which almost works:

Raphael js click, hover and fill

jquery hover raphael fill mouseleave

I'm using Raphael js for the village plan where shapes are cottages on the plan. When I hover cottages they are filled with color. When I click a cottage there is a little window appears to show some

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.