如何循环遍历一个 jQuery 对象数组并使用 .hide() 方法隐藏每个元素

Question

我正在尝试循环遍历一个由jQuery对象组成的数组，当点击时这些对象会被隐藏。目前我不确定哪里出了问题，想知道有没有人能够解释一下我需要做什么才能使它正常工作？

我在这里创建了一个fiddle http://jsfiddle.net/hd5qa/3/ 非常感谢任何建议。

Kyle

- styler

---

我创建对象的原因是因为我想要多次使用它们。 - styler

Answer 1

您的示例代码存在以下问题：

1）您没有包含jQuery库。

2）您没有正确关闭each循环（缺少括号）。

3）您在"myButton"中缺少id选择器#。

这是一个已更新且可运行的示例：updated, working fiddle。

但请注意，您可以简单地执行以下操作：

$("#blue, #red, #green, #black, #purple, #orange").hide();

或者更好的方法是将它们全部放在一个包含父元素中，然后简单地隐藏它，或者使用$("#parent div").hide();。 您可以将该选择的结果存储在单个变量中，而不是当前拥有的6个变量，因为jQuery方法往往在匹配集中的每个元素上操作，而无需循环。

- James Allardice

---

或者使用类 - 没有额外的标签。 - Bojangles

是的，有很多比将每个元素存储为单独的jQuery对象数组并迭代该数组更好的选项！ - James Allardice

Answer 2

你想通过对象数组的方式做这个有什么原因吗？

你可以通过像这样添加选择器来简化所有操作：

$('#blue, #red, #green, #black, #purple, #orange').hide();

- Sander

Answer 3

$(myArray).each(function(index, element){
    element.hide();
});

你可能想尝试这样的代码!

var myArray = [$blue, $red, $green, $black, $purple, $orange];

$('#myButton').click(function() {
    $(myArray).each(function(index, element) {
        $(element).hide();
    });

 });

你可以在这里看到它的运行效果： http://jsfiddle.net/hd5qa/3/

- Renato Gama

Answer 4

我更喜欢这种方式：

var elements = $("div");
var numOfElements = elemenets.length;
for(var i=0; i<numOfElements; i++) {
    var element = elements.eq(i);
    element.hide();
}

- Krasimir

---

$(".div") 假设他已经给所有的 div 加了类名 'div'。我认为你是想用 $('div') ... 但我也可能错了。 - Sander

Answer 5

有三个问题：

• 您使用了MooTools库而不是jQuery来运行代码。
• 您在按钮选择器中忘记了#。
• 您在$.each循环的结尾处忘记了);。

http://jsfiddle.net/Guffa/hd5qa/5/

- Guffa