jQuery中10個強大的遍歷函數
為什么我們要進一步提煉一系列元素，難道是jQuery選擇語法不夠強大？讓我們從示例開始。在下面提到的網頁中，當一個star被點擊時，我們需要給它以及左邊的每個star添加class“on”。首先，讓我們看看下圖所示的簡單的頁面，通過這個教程我們將選擇這些元素。
51CTO推薦專題：jQuery從入門到精通
◆div.container是包裹元素；
◆div.photo、div.title、div.rating是div.container的直接子級；
◆每個div.star是div.rating的子級；
◆當div.satr的class為“on”時，它是一個完整的star。
與此同時，我們要改變所有star父元素的背景顏色，因此，我們的代碼如下：
- $('.star').click(function(){
- $(this).addClass('on');
- // 如何選取當前對象的 父元素?
- // 如何獲得當前star左側所有的star?
- });
在第二行，我們得到了我們點擊的當前對象。但是，如 何得到stars的父級？即div.rating。但是，在一個頁面中，有很多div.rating。哪一個是我們想要的？如何獲得“this”左邊所有 的star？可喜的是，jQuery允許我們基于這些基層關系，在現存集合的基礎上獲得新的元素集合。而這些正是遍歷函數發揮作用的地方。
1、children
這個函數得到一組元素的直接子級。
在很多情況下會很方便，看看下面這張圖：
◆開始的時候容器中的star全部被選擇；
◆給children()傳遞一個選擇表 達式將選擇結果縮小至選中的star；
◆如果chilidren()每接受任何 參數，將返回所有直接子級；
◆不返回孫級元素。
2、filter
這個函數通過傳遞的選擇表達式從一個集合中過濾元素。任何不匹配這個表達式的元素將從選擇的集合中移除。
下面的這個例子直截了當。從 5個star中過濾出class為“on”的star。
3、not
與filter恰恰相 反，not()從集合中移除匹配的元素。看下面這個例子。偶數列的star從選擇集合中移除，留下的是奇數行的star。
“ 注意：'Even'和'odd'選擇器是從0開始的，從0開始計數，不是從1。”
4、add
如果我們想在集合中增加一些元素怎么辦？add()函 數正是做這件事的。同樣簡單明了，photo盒 子被添加到集合中。
#p#
5、slice
有時候，我們需要根據元素在集合的位置獲取集合的子集。sliece()正是做這個的。
◆第一個參數是從零開始的第一個元素的位置，它包含在返回的片段中；
◆第二個參數是從零開始的第一個元素的索引。不包含在返回的片段中。如果省略，將延伸至集合的末尾；
所以，slice(0,2)將選取前兩個star。
6、parent
parent()函數選取一系列元素的直接父級。
正如下圖所示，第一個star的 直接父級被選中。非常方便，應當指出，它僅僅返回直接父級，為什么很奇特？因為沒有祖父元素或祖先元素被選中。
7、parents
這是復數形式，parents()選 擇集合的所有祖先元素。我的意思是所有祖先元素包括直接父級到“body”和“html”元素。所以最好通過傳遞表達式縮小選擇結果。
通過給parents()傳 遞.container參數，div.container將被選中，它實際上第一個star的祖父。
8、siblings
這個函數選擇一組元素的所有兄弟姐妹，傳遞一個表達式可以篩選結果。看看這個例子：
如圖所示，“odd”的節點被選中。索引是從零開始的，看看下面star的紅色數字。
9、prev & prevAll
prev()函數選擇前一個兄弟節點。prevAll()選擇一個元素集合前面所有的兄弟節點。如果你正在構建一個星級部件，這將相當方便。第三個star前面的兄弟節 點被選中。
10、next & nextAll
這些函數與prev和prevAll工作方式相同，不過它選擇的是下一個兄弟姐妹。
結論
最后，讓我們來看看如何利用這些函數來解決現實世界中令我們頭痛的問題。
- $('.star').click(function(){
- $(this).addClass('on');
- // 如何取得當前對象的 父級?
- $(this).parent().addClass('rated');
- // 如何獲得當前對象左 側的star?
- $(this).prevAll().addClass('on');
- $(this).nextAll().removeClass('on');
- });
這就是這篇文章中早期提到的問題，對嗎？在這幾行代碼中我們使用了這幾個遍歷函數。
在第8行和9行，prevAll()和nextAll()。選擇填充的star和空的star。現在，遍歷函數是做么的方便。當在一起使用時，它們將更加強大。也就是說，一個函數的輸出是另一個函數的輸 入，它們是鏈式的。
【編輯推薦】
