4.10　操作选择中的每个元素

正如本书4.6.4节所介绍的，jQuer y的独特功能之一是，它的大多数函数都自动遍历jQuery选择中的每一项。例如，要让页面上的每个＜img＞淡出，只需要一行JavaScript代码：

$（'img'）.fadeOut（）；

.fadeOut（）函数导致一个元素慢慢消失，并且当把它附加到包含多个元素的一个jQuery选择时，这个函数遍历选择并且淡出每个元素。我们经常想要遍历元素的选择并在每个元素上执行一系列操作。jQuery提供的.each（）函数正是用于此目的。例如，假设要在页面底部的一个参考资料框（这个框可能叫做“O ther Sites Mentioned in This Article”）中列出页面中的所有外部链接（没错，你可能曾经想过要这么做，但一直焦急地等着学习如何做）。不管怎样，可以通过以下步骤创建该框：

1.获取指向站点之外的所有链接。

2.获取每个链接（URL）的HREF属性。

3.把指向其他链接的URL添加到列表中，放入参考资料框。

jQuery没有内置的函数来执行这些额外的步骤，但是可以使用each（）函数来自行完成。它只是一个jQurey函数，因此，可以在jQurey元素选择的末尾添加它，如下所示：

$（'selector'）.each（）；

4.10.1　匿名函数

要使用each（）函数，可以把一种特殊类型的参数传递给它，即一个匿名函数。匿名函数是包含了想要在每个选择元素上执行的步骤的函数。它之所以叫做匿名，是因为和3.4节所介绍的函数不同，没有给它一个名字。下面是匿名函数的基本结构：

function（）{

//code goes here

}

由于没有名字，因此没有办法调用这个函数。例如，对于正常命名的函数，将其名称与一对圆括号一起使用，即calculateSalesTax（）；。相反，把匿名函数作为一个参数传递给其他函数（奇怪，有点令人混淆，但事实如此）。如下所示，把一个匿名函数作为each（）函数的一部分：

$（'selector'）.each（function（）{

//code goes in here

}）；

图4-6展示了这一结构的不同部分。最后一行代码特别容易令人混淆，因为它包括3个不同的符号来结束整个结构的3个部分。}表示函数的结束（这也是传递给each（）函数的参数的结束）；）是each（）函数的最后部分；而；表示一条JavaScript语句的结束。换句话说，JavaScript解释器把所有这些代码看做一条单独的指令。

图　4-6　jQuery的each（）函数允许遍历页面元素的一个选择并且在每个元素上执行一系列的任务。使用该函数的关键在于理解匿名函数

既然外围的结构设置好了，就该在其中放入匿名函数了，而这是我们希望对于选择中的每个元素发生的所有事情。each（）函数就像一个循环一样运行，这意味着匿名函数内部的指令对于获取的每个元素都将运行一次。例如，假设在页面上有50幅图像并且把如下JavaScript代码添加到页面的其中一个脚本中：

$（'img'）.each（function（）{

alert（'I found an image'）；

}）；

将会出现50个带有消息“I found an image”的对话框（这真是烦人，因此不要尝试这么做）。

注意：这看上去可能有些熟悉。正如你在4.3节所见到的，当把jQuery添加到页面中，应该使用document.ready（）函数来确保在浏览器执行任何JavaScript之前，页面的HTML已经载入了。这个函数还接收一个匿名函数作为参数：

$（document）.ready（function（）{

//programming goes inside this

//anonymous function

}）；