jQuery：每个无序列表的链接都有一个fancybox画廊

Question

在我有两个或多个链接的无序列表的页面中，每个链接都链接到一个图像。

由于这些无序列表是从数据库中生成的，我想用 fancybox 从每个无序列表中创建一个画廊。你知道如何在 jQuery 的帮助下为每个列表的所有链接添加相同的 rel 属性吗？

看起来像这样：

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

但它应该在 jQuery 的帮助下看起来像这样：

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

我设法让它看起来像这样：

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

使用此代码：

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

但这对我没有帮助。 :(

Answer 1

试试这个代码：

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