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