CodingForums.com - Setting rel on links with images

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - Setting rel on links with images (http://www.codingforums.com/showthread.php?t=283668)

Setting rel on links with images

Hi,

My (vary basic) knowledge of Javascript tells me this should be fairly easy to do, but there's one bit I'm not sure of.

I have a series of divs on a page with class "product-image" - I want all the links within each div to have the same rel, but the rel for each div should be unique.

I know this would work, generally, if I wanted to add the same rel attribute to every link:

Code:

<script type="text/javascript">

$(document).ready(function() {

       $('div.product-image a').each(function() {

          $(this).attr('rel','lightbox'); 

       });

});

</script>

... but how do I make it add a different, unique rel within each different div.product-image?

It doesn't particularly matter what the rel is as long as it is unique, it could just be a random string. The reason I need this to happen automatically, rather than manually, is because the site will be managed by the user through a CMS, so I need to automatically attach the right functions.

Code:

<script type="text/javascript">

$(document).ready(function() {

       $('div.product-image a').each(function(index) {

          $(this).attr('rel','lightbox ' + index); 

       });

});

</script>

or possibly..

Code:

<script type="text/javascript">

$(document).ready(function() {

       var rels = [ "Hi there", "Wazzup", "Tada!" ], relslen = rels.length;

       $('div.product-image a').each(function(index) {

           if (index < relslen) {

              $(this).attr('rel', rels[index]);

           } 

       });

});

</script>

.. although this is not the designated use for rel.

If you want something unique on each you should be using id rather than rel - since rel is supposed to define the relationship that the item linked to has to the current page and as they are all lightboxes they should all have the same rel value. The id attribute is the one intended for assigning unique values to things in the page.

If you are adding information to each link then you could consider the jQuery data() method.