使用 JQuery 对具有唯一 rel 属性的元素执行功能答案

【问题标题】：Using JQuery to perform a function on elements with unique rel attribute使用 JQuery 对具有唯一 rel 属性的元素执行功能
【发布时间】：2011-08-01 15:46:45
【问题描述】：

我试图通过自动检测填充一组链接的“rel”属性的值来提高一些代码的可移植性，以便我可以在页面上创建多个图像灯箱。基本上，现在我正在从数据库中提取有关酒店的数据，对于我发现的每家酒店，我都在创建一个由 JCarousel 组成的简单图片库，并且对于每个 JCarousel，都可以点击图片来启动仅包含图片的灯箱从那套。这是我目前用来实现我的目标的代码：

$(document).ready(function(){
    $(".carousel").jcarousel({
        wrap: 'circular',
        visible: 3,
        scroll: 1
    });
    $('a.lightbox[rel=9]').lightBox();
    $('a.lightbox[rel=10]').lightBox();
    $('a.lightbox[rel=11]').lightBox();
    $('a.lightbox[rel=13]').lightBox();
});

当前方法的问题是，如果其他人将酒店添加到数据库中（总是如此），图像将出现在轮播中，但除非我手动添加，否则不会有灯箱效果。如果我计划在多个网站上使用此代码（我确实这样做了），这意味着需要进行相当大量的维护。

我想做的是检测 a.lightbox 元素的唯一“rel”属性，并在 $.each 中循环它们以应用灯箱效果。我只是不知道该怎么做。有什么建议吗？

【问题讨论】：

嗨，Bendon，我怀疑您不需要使用 rel 属性。我已经看到了自动为您将相关灯箱组合在一起的灯箱。但这实际上取决于您使用的灯箱。例如在srbart.com 上查看firebug 中的源代码，如果您将prettyPhoto[murals] 更改为prettyPhoto[test]，它会为您将其放入单独的图库中。
我可能在您的要求中遗漏了一些东西，但如果您有带有灯箱类的 a 标签，您可以为该类的任何标签添加灯箱（即$('a.lightbox').lightBox();），还是有什么理由只需要应用到某些a.lightbox 元素？
@Alex - 不幸的是，在这种情况下，关闭 rel 属性只是创建了一个巨大的灯箱相册，这对我来说并不适用，因为每个灯箱相册都是为了展示不同酒店的图像。
@g_thorn：我可能不是很清楚，但基本上在任何一组元素上调用 .lightbox() 时，您或多或少都会创建包含这些元素的相册。由于我需要为每家酒店提供不同的相册，因此我需要在多个图像集上一个接一个地调用 .lighbox()。
@Brendon，对不起，我认为我的评论不是很清楚。我的评论更多的是看看替代灯箱插件，因为我看过的那些会自动为您创建单独的画廊。例如使用 prettyPhoto 灯箱，当然这取决于您的其他要求。

标签： jquery loops jquery-selectors lightbox

【解决方案1】：

使用Object 作为一种关联数组来存储看到的rel 属性：

var rels = {};  // empty object

$('[rel]').each(function() {     // for every element with a 'rel' attribute
    var r = $(this).attr('rel'); // extract the attribute's value
    rels[r] = 1;                 // store a dummy value in the object
});

rels = Object.keys(rels);        // convert the object to an array of its keys

然后您可以将您的灯箱依次应用于每个唯一的rel 值：

$.each(rels, function(index, value) {
    $('.lightbox[rel="' + value + '"]').lightBox();
});

注意：Object.keys 是一个 ES5 函数。有关兼容性功能，请参见 Mozilla Developer Network 站点。

【讨论】：

感谢 Alnitak，这正是我想要的。

【解决方案2】：

你可以试试这个

var $this, rel, rels [9, 10, 11, 13];
$('a.lightbox').each(function(){
   $this = $(this);
   rel = $this.attr("rel");
   if($.inArray(rel , rels) > -1)
     $this.lightBox();
});

【讨论】：