jQuery 对象链详解

字数968 大约花费4分钟

jQuery 函数通过返回 jQuery 对象集,可以继续使用 jQuery 函数,这样就形成了一个链条。
需要注意的是,有些方法会改变对象集,此时想要返回到上一个对象集,要用 end()方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
<td>1596</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
<td>1599</td>
</tr>
</table>
1
2
3
4
5
6
7
$('td:contains(Henry)') // Find every cell containing "Henry"
.parent() // Select its parent
.find('td:eq(1)') // Find the 2nd descendant cell
.addClass('highlight') // Add the "highlight" class
.end() // Return to the parent of the cell containing "Henry"
.find('td:eq(2)') // Find the 3rd descendant cell
.addClass('highlight'); // Add the "highlight" class

在这个例子中

1
2
$('td:contains(Henry)') // Find every cell containing "Henry"
.parent()

表示包含了文本 Henry 的列,所在的 tr,也就是包含了文本 Henry 的行。

1
2
3
4
$('td:contains(Henry)') // Find every cell containing "Henry"
.parent() // Select its parent
.find('td:eq(1)') // Find the 2nd descendant cell
.addClass('highlight') // Add the "highlight" class

find 方法,改变了对象集,变成了这些行的第二列的集合。而 addClass 方法在对这些列进行操作后,将对象集原样返回,仍然是第二列的集合。
此时,如果要重新获取上一个对象集,也就是包含了文本 Henry 的行,需要使用 end 方法。
end()方法不是针对函数,而是对象集的,返回的永远是上一个对象集,而不是上一次操作的结果,所以

1
2
3
4
5
$('td:contains(Henry)') // Find every cell containing "Henry"
.parent() // Select its parent
.find('td:eq(1)') // Find the 2nd descendant cell
.addClass('highlight') // Add the "highlight" class
.end() // Return to the parent of the cell containing "Henry"

返回到

1
2
$('td:contains(Henry)') // Find every cell containing "Henry"
.parent() // Select its parent

而不是

1
2
3
$('td:contains(Henry)') // Find every cell containing "Henry"
.parent() // Select its parent
.find('td:eq(1)') // Find the 2nd descendant cell

所以

1
2
3
.end() // Return to the parent of the cell containing "Henry"
.find('td:eq(2)') // Find the 3rd descendant cell
.addClass('highlight'); // Add the "highlight" class

获取到包含了文本 Henry 的行后,继续对这些行的第三列进行 addClass 操作。

有些方法如无参的 text()方法,不再返回对象链,而是一个字符串,这样,不仅对象集改变,而且对象链也无法继续下去了。因为是个字符串,此时,不可以使用 end 方法获取 text()方法对应的对象集。话说,实际开发过程中,获取到这些文本,也应该是操作的终点。

使用 get()方法或 get(index)或者使用 [] 会将对象转为普通的 dom 对象,不能再使用 jQuery 函数,所以,对象链也被破坏了。此时,不可以使用 end 方法获取 text()方法对应的对象集。

使用对象链对同一个元素进行连续操作或在附近的元素间移动和操作,在实际开发中用处很大。但是如果链条过长,在可读性方面较差,应该拆解成几个语句。当拆解成多个语句时,有时候会使用变量存储 jQuery 对象集,这时候要注意一个问题,当 jQuery 对象集增加或减少 jQuery 对象时,变量的对象集不会相应修改,对应的然后是原来的对象集。详见本站的《浅谈变量对 jQuery 对象集的引用》
您可以在 这里 查看效果和调试。

谈谈 IT的文章均为原创或翻译(翻译会注明外文来源),转载请以链接形式标明本文地址: http://tantanit.com/jquery-dui-xiang-lian-xiang-jie/

谈谈IT

欢迎关注官方微信公众号获取最新原创文章