4.10.2　this和$（this）

在使用each（）函数的时候，你当然想要访问或设置每个元素的属性，例如，找到每个外部链接的URL。要在每次循环中访问当前元素，使用一个特殊的关键字this。this关键字引用正在调用匿名函数的元素。因此，首次迭代循环的时候，this引用jQurey选择中的第一个元素，而第二次迭代循环的时候，this引用第二个元素。

jQuery按照这种方式工作，this引用一个传统的DOM元素，因此我们可以访问传统的DOM属性。但是，正如你在本章所了解到的，特殊的jQurey选择允许你把所有精彩内容放入jQurey函数。因此，要将其转换为jQurey的对应物，需要按照$（this）编写。

此时，你可能会认为关于this的所有内容有点黑色幽默，故意使你头疼。这不是幽默，但确实有点令人混淆。为了帮助你搞清楚如何使用$（this），再看一眼本节开始所描述的任务：在页面底部的参考资料框中创建外部链接的一个列表。

假设页面的HTML已经准备好一个＜div＞标签用于外部链接，例如：

＜div id="bibliography"＞

＜h3＞web pages referenced in this article＜/h3＞

＜ul id="bibList"＞

＜/ul＞

＜/div＞

第一步是获取指向站点外部的所有链接的一个列表。可以使用一个属性选择器来做到这一点（参见4.6.2节）：

$（'a[href^="http：//"]'）

现在，遍历每个链接，添加each（）函数：

$（'a[href^="http：//"]'）.each（）

然后添加匿名函数：

$（'a[href^="http：//"]'）.each（function（）{

}）；

匿名函数的第一步是获取链接的URL。既然每个链接都有一个不同的URL，因此必须访问每次迭代时的当前元素。$（this）关键字让我们做到这一点：

$（'a[href^=http：//]'）.each（function（）{

var extLink=$（this）.attr（'href'）；

}）；

中间的粗体代码做几件事情：首先，它创建新的变量（extLink），然后将当前元素的href属性值存储到该变量中。每次迭代，$（this）引用页面上的一个不同链接，因此，每次迭代的时候，extLink变量都会变化。

在这之后，只需要把新的列表项添加到＜ul＞标签（参见4.10.2节开篇给出的HTML）中，如下所示：

$（'a[href^=http：//]'）.each（function（）{

var extLink=$（this）.attr（'href'）；

$（'#bibList'）.append（'＜li＞’+extLink+’＜/li＞'）；

}）；

几乎每次使用each（）函数的时候都要使用$（this）关键字，因此，$（this）迟早会变成你的第二个特性。为了帮助你熟悉这个概念，我们将尝试另一个教程。

注意：本节用到的示例脚本是说明$（this）关键字的用法的一种好方法，但是，它可能不是完成把外部链接的列表写入页面这一任务的最佳方法。首先，如果没有链接，＜div＞标签（它直接编码到页面的HTML中）仍然出现，但它是空的。此外，如果某人访问页面而没有支持JavaScript，将不会看到链接，而只会看到一个空框。更好的方式是也使用JavaScript来创建结束的＜div＞标签。我们将会在本章教程配套的bibliography.html文件中看到这样的一个例子。