Javascript 在一个页面上创建多个库

我正在建立一个WorpAddress网站，并且在一个页面上有多个使用短代码构建的库。目前所有的图片都被赋予了rel属性'prettypto[1]”，但我需要每个图库都是独立的。 我在页面上总共有56张图片，所以当第一个画廊的图片在lightbox中打开时，它显示为1/56，我可以点击所有56张图片，我想要的是画廊1显示为1/16 然后是画廊1/16等。 我被告知在我的raw.js文件中编辑这一行脚本：

$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');

但也不知道该怎么处理它？任何帮助都将不胜感激。 以下是相关页面的链接：

---

根据方括号中的内容将图库分组。因此，您将在同一个图库中获得所有56幅图像，因为它们都已分配给图库1

你真正想要的是画廊1的前16个

$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');

接下来的16个在画廊2

$(".gallery-icon a").attr('rel', 'prettyPhoto[2]');

问题是-如果

rel

属性是通过JS分配的，那么如何实现这一点？我会根据父div id来做这件事。每个gallery图标元素都有一个gallery项父项。其中每一个都是具有特定ID的gallery类的一部分

<div id='gallery-3' class='gallery galleryid-555 gallery-columns-4 gallery-size-thumbnail'>
    <dl class='gallery-item'>
        <dt class='gallery-icon'>

我会通过查找所有画廊图标并使用

最近的（）

来查找父画廊id，如下所示

我没有测试过它或任何东西，但像这样的东西应该让你朝着正确的方向前进

            $('#content').find('.gallery-icon a').each(function() {

                var gallid = $(this).closest("div").attr("id");

                $(this).attr('rel', 'prettyPhoto['+ gallid +']');

            });     

---

我可能有一个更简单的解决方案，我只是在

每个
函数中检查我的所有库
div
，然后在其中的图像中将
初始化为

$(document).ready(function(){
    $.each($(".gallery"), function(i, val) {
        var queryString = ".gallery:nth(" + i + ") a[rel^='prettyPhoto']";
        $(queryString).prettyPhoto({animation_speed:'normal',theme:'light_square', social_tools: false});
    });
});

所有需要做的就是更改html中的rel，在其中添加类似于rel=“prettypto[pp_gal]”的图库

在您在div中创建的第一个库中，将rel=“prettypto[pp_gal]”更改为“prettypto[gallery1]”（例如）

旁边是“Prettypto[gallery2]”等等。
McNab是你的救星。它第一次奏效了。非常感谢您的回复和帮助。为什么选择downvote？它很简单，很有效，而且您的HTML标记不必在不同的图库之间更改（这很好，因为用户可以在我的web上添加或删除图库）
$(document).ready(function(){
    $.each($(".gallery"), function(i, val) {
        var queryString = ".gallery:nth(" + i + ") a[rel^='prettyPhoto']";
        $(queryString).prettyPhoto({animation_speed:'normal',theme:'light_square', social_tools: false});
    });
});