javascript - jQuery/JavaScript 按属性设置数组

Question

我正在尝试我的第一个灯箱插件，并试图找出如何处理设置导航控件。我知道这必须是一个简单的修复，但我完全想太多了。它支持 html 内容和图像，并使用标准 rel 属性进行图库连接。我的问题是:如何根据 rel 从 1 个图像(或 div)导航到下一个图像？

起初我认为 $(this).nextAll('[rel="ExampleGallery"]') 可以工作，但不幸的是这并不针对下一个。所以...我可能完全偏离了轨道，但我现在想做的如果循环调用插件的对象，检测它们是否有 rel 标签，然后如果它们确实将它们的值推送到动态创建的数组中Gallery Names 作为数组名称。然后只需使用数组中的索引来浏览对象...

HTML

<img src="images/pic1.png" width="230px" height="215px" rel="Gallery1"/>
<img src="images/pic2.png" width="230px" height="215px" rel="Gallery2"/>
<img src="images/pic3.png" width="230px" height="215px" rel="Gallery1"/>

数组

Gallery1                  Gallery2

0 (ref to img tag 1)      0 (ref to img tag 2)
1 (ref to img tag 3)

再说一次，我认为我做错了，如果这是错误的，我很抱歉。我该如何为此编写 JS？

1-根据rel名称动态创建数组 2-将对象推送到数组以便稍后引用

非常感谢!

Answer 1

我认为您应该重新考虑为此使用的数据结构。然而，为了简单地收集图像，这将起作用:

var arrays = {};
$('img').each(function(){
    var arrayName = $(this).attr('rel');
    if(arrays.hasOwnProperty(arrayName)) {
        arrays[arrayName].push(this);
    }
    else {
        arrays[arrayName] = [this];
    }
}

最后: 数组是{ Gallery1: [img1, img3], Gallery2: [img2] }