（三）选择元素——（11）DOM遍历方法（DOM traversal methods）

（3）选择元素——（11）DOM遍历方法（DOM traversal methods）

The jQuery selectors that we have explored so far allow us to select a set of elements as we navigate across and down the DOM tree and filter the results. If this were the only way to select elements, then our options would be quite limited (although, frankly, the selector expressions are robust in their own right, especially when compared to the regular DOM scripting options). There are many occasions when selecting a parent or ancestor element is essential; that is where jQuery's DOM traversal methods come into play. With these methods at our disposal, we can go up, down, and all around the DOM tree with ease.

到目前为止我们探索过的jquery选择器允许我们在操纵DOM树的时候选择一串元素，然后过滤结果。如果只有一种方法选择元素，我们的选择将会受到限制（尽管，坦白说，和原生的DOM选择器比起来，这些选择器表达式凭他们本身已经非常健壮了）有很多情况下选择一个父元素或者祖先元素是必须的，这就是jQuery的DOM遍历方法出现的原因。通过这些方法，我们可以很容易的遍历整个DOM树。

Some of the methods have a nearly identical counterpart among the selector expressions. For example, the line we first used to add the altclass, $('tr:even').addClass('alt'), could be rewritten with the .filter()method as follows:

$('tr').filter(':even').addClass('alt');

For the most part, however, the two ways of selecting elements complement each other. Furthermore, the .filter()method in particular has enormous power because it can take a function as its argument. The function allows us to create complex tests for whether elements should be kept in the matched set. Let's suppose, for example, we want to add a class to all external links. jQuery has no selector for this sort of case. Without a filter function, we'd be forced to explicitly loop through each element, testing each one separately. With the following filter function, however, we can still rely on jQuery's implicit iteration and keep our code compact:

$('a').filter(function() {return this.hostname && this.hostname != location.hostname;}).addClass('external');

一些方法的选择器表达式拥有几乎相同的副本。比如，我们开始使用去添加alt类的代码$("tr:even").addClass("alt")，可以使用.filter()重写，就像下面这样$("tr").filter(":even").addClass("alt")，然而在很多地方，这两种选择元素的方法互为补充。另外，尤其是.filter()方法有着巨大的魔力，因为他可以把一个函数作为参数。这个函数允许我们创建一个复杂的测试用来判断元素是否应该被存放在集合中。比如，让我们假设，我们想要给所有的外部链接添加一个类。jquery对这种场景并没有一个选择器。在没有一个过滤方法的情况下，我们将强迫显式循环遍历每一个元素，分开测试每一个元素。然而通过使用下面的过滤函数，我们仍然依靠jqueyr的隐式迭代，让我们的代码很紧凑：$('a').filter(function() { return this.hostname && this.hostname != location.hostname;}).addClass('external');
The second line filters the set of <a>elements by two criteria:
1.  They must have a hrefattribute with a domain name (this.hostname). We use this test to exclude mailtolinks, for instance.
2.  The domain name that they link to (again, this.hostname) must not match (!=) the domain name of the current page (location.hostname).
第二行代码通过下面这两个准则过滤了a元素集合：1、他们必须有一个href属性，而且含有域名（this.hostname）。我们使用这个测试排除类似于mailto链接。2、他们连接到的域名必须不是当前页的域名地址（location.hostname）。More precisely, the .filter()method iterates through the matched set of elements, calling the function once for each, and testing the return value. If the function returns false, then the element is removed from the matched set. If it returns true, then the element is kept, as follows:

更精确的说，.filter()方法迭代调用匹配的元素集合，为每一个元素调用函数，然后检查返回值。如果返回false，这个元素将被从匹配的元素集合中移除。如果返回值是true，这个元素将会被保留,，如下：

In the next section, we'll take another look at our striped tables to see what else is possible with traversal methods.

在下面的小节，我们将再看一下我们加了条纹的列表去查看一下通过遍历方法，我们还能做到哪些事情。

查看更多 下一篇