jQuery: One fancybox gallery for each unordered list of links

Question

In a page in which I have two or more unordered lists of links at which each link links to an image.

As these unordered lists are generated from a database I would like to get fancybox to make one gallery from each unordered list. Do you hve an idea how to put the same rel attribute to all the links of each list with the help of jQuery?

It looks like this:

<ul>
<li><a href=""><thumb img/></a></li>
<li><a href=""><thumb img/></a></li>
<li><a href=""><thumb img/></a></li>
</ul>

<ul>
<li><a href=""><thumb img/></a></li>
<li><a href=""><thumb img/></a></li>
<li><a href=""><thumb img/></a></li>
</ul>

But it should with the help of jQuery look like this:

<ul>
<li><a rel="gallery1" href=""><thumb img/></a></li>
<li><a rel="gallery1" href=""><thumb img/></a></li>
<li><a rel="gallery1" href=""><thumb img/></a></li>
</ul>

<ul>
<li><a rel="gallery2" href=""><thumb img/></a></li>
<li><a rel="gallery2" href=""><thumb img/></a></li>
<li><a rel="gallery2" href=""><thumb img/></a></li>
</ul>

I managed it to look like this:

<ul>
<li><a rel="gallery1" href=""><thumb img/></a></li>
<li><a rel="gallery2" href=""><thumb img/></a></li>
<li><a rel="gallery3" href=""><thumb img/></a></li>
</ul>

<ul>
<li><a rel="gallery4" href=""><thumb img/></a></li>
<li><a rel="gallery5" href=""><thumb img/></a></li>
<li><a rel="gallery6" href=""><thumb img/></a></li>
</ul>

With this code:

$("ul a").attr(
   "rel", function( index ){
      return( "gallery" + (index + 1) );
    }
);

But this doesn't help me. :(

Answer 1

Try this code:

$("ul").each(function(index, element) {
    $(this).find("li").find("a").attr("rel","gallery"+(index+1));
});