jQuery/JavaScript按属性设置数组

jQuery/JavaScript Setting Up Array by Attribute

本文关键字：设置 数组 属性 JavaScript jQuery      更新时间：2023-12-25

我正在尝试我的第一个lightbox插件，并试图弄清楚如何设置导航控件。我知道这必须是一个简单的解决方案，但我想得太多了。它支持html内容和图像，并使用标准的rel属性进行库连接。我的问题是：如何根据rel从一个图像（或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-将对象推送到阵列，以便以后引用

非常感谢！

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

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

最后：arrays是{ Gallery1: [img1, img3], Gallery2: [img2] }

相关文章：