jQuery 数组 - 新手需要启动答案

【问题标题】：jQuery arrays - newbie needs a kick startjQuery 数组 - 新手需要启动
【发布时间】：2010-05-26 07:31:26
【问题描述】：

我才真正开始使用这个网站，而且这里的社区已经给我留下了深刻的印象！这是我不到三天的第三个问题。希望我能尽快开始回答问题，而不仅仅是问问题！

我对 jQuery 还很陌生，找不到像样的数组教程。我希望能够在我的页面上创建一个以多个 ID 为目标的数组，并对每个 ID 执行相同的效果。

例如，我设置了以下选项卡：

$('.tabs div.tab').hide();
        $('.tabs div:first').show();
        $('.tabs ul li:first a').addClass('current');
        $('.tabs ul li a').click(function(){
            $('.tabs ul li a').removeClass('current');
            $(this).addClass('current');
            var currentTab = $(this).attr('href');
            $('.tabs div.tab').hide();
            $(currentTab).show();
            return false;
        });

我使用 .tag 类来定位选项卡，因为同一页面上有多个集合，但我听说 jQuery 在定位 ID 时运行得更快

如何在上述代码中添加一个数组来定位 4 个不同的 ID？我看过了

var myArray = new Array('#id1', 'id2', 'id3', 'id4');

还有

var myValues = [ '#id1', 'id2', 'id3', 'id4' ];

哪个是正确的，然后我如何在代码中为我的选项卡使用数组...？

【问题讨论】：

为什么对提问感到恼火？每个人都有自己的需求。
Ids 更快，但我认为与使用类名的干净、易于管理的代码相比，性能损失会很小。以标签名称开头（如 $('div.tabs') ）尽可能快。

标签： jquery arrays

【解决方案1】：

首先，您需要区分 JavaScript（语言）和 jQuery（框架库）。

数组是 JavaScript 语言的一个特性，而 jQuery 与数组几乎没有什么关系，只是到处使用它作为数据结构。

我也怀疑使用 ID 的数组/列表比使用类快得多，恕我直言，这将是更清洁的解决方案。

尽管如此，你可以这样做：

您可以遍历包含您的 ID 的字符串数组，并为每个字符串重复您的代码块，而不是引用类。像这样的：

$.each(['#id1', '#id2', '#id3', '#id4' ], function(id) {
  $(id + ' div.tab').hide();
  $(id + ' div:first').show();
  $(id + ' ul li:first a').addClass('current');
  $(id + ' ul li a').click(function(){
     // etc.
  });
});

然而，使用这个类（正如我提到的）更干净，而且可能更容易，因为这样您只需将代码“拖放”到页面中，它就会完成它的工作，而无需担心可能会更改每个页面的 ID 列表。

【讨论】：

谢谢，这确实有助于我更好地理解在这个示例中如何使用数组。不过，我可能会接受您的建议并坚持上课，我会等着看它需要什么（如果有的话）性能。

【解决方案2】：

在选择器中使用逗号。例如：

$('#id1, #id2, #id3, #id4').hide();

这里不需要显式数组。但是，请注意，在 JavaScript 中，

new Array('a', 'b', 'c', 'd')

和

['a', 'b', 'c', 'd']

意思相同。

【讨论】：

【解决方案3】：

你的意思是你想要一个包含许多 Id 的选择器吗？

喜欢：

$('#id1,#id2,#id3,#id4').hide()

或者你真的想从数组中创建选择器？你也可以这样做

var myArray = new Array('#id1', '#id2', '#id3', '#id4');

$(myArray.join()).hide();

希望对你有帮助

【讨论】：

【解决方案4】：

你可以在这里使用$.each

$.each(['id1', 'id2', 'id3', 'id4' ], function() {

    /* whatever you want to do with each item. 
       this will reference the item in the current iteration */

});

【讨论】：