jQuery中的遍歷說容易也很容易，說難也很難。
說簡單是因為她的遍歷函數很簡單，也很清晰的顯示了向前，向后，同級遍歷的操作。
說難是因為過於復雜的DOM結構中很容易弄亂，比如表格嵌套表格，便利一個元素可能要向上找好幾次，在向同級找，而且往往出錯了我們也不知道他找的是哪里。
我們先來看下，jQuery中的遍歷函數表：
| 函數 | 描述 |
|---|---|
| .add() | 將元素添加到匹配元素的集合中。 |
| .andSelf() | 把堆棧中之前的元素集添加到當前集合中。 |
| .children() | 獲得匹配元素集合中每個元素的所有子元素。 |
| .closest() | 從元素本身開始，逐級向上級元素匹配，並返回最先匹配的祖先元素。 |
| .contents() | 獲得匹配元素集合中每個元素的子元素，包括文本和注釋節點。 |
| .each() | 對 jQuery 對象進行迭代，為每個匹配元素執行函數。 |
| .end() | 結束當前鏈中最近的一次篩選操作，並將匹配元素集合返回到前一次的狀態。 |
| .eq() | 將匹配元素集合縮減為位於指定索引的新元素。 |
| .filter() | 將匹配元素集合縮減為匹配選擇器或匹配函數返回值的新元素。 |
| .find() | 獲得當前匹配元素集合中每個元素的后代，由選擇器進行篩選。 |
| .first() | 將匹配元素集合縮減為集合中的第一個元素。 |
| .has() | 將匹配元素集合縮減為包含特定元素的后代的集合。 |
| .is() | 根據選擇器檢查當前匹配元素集合，如果存在至少一個匹配元素，則返回 true。 |
| .last() | 將匹配元素集合縮減為集合中的最后一個元素。 |
| .map() | 把當前匹配集合中的每個元素傳遞給函數，產生包含返回值的新 jQuery 對象。 |
| .next() | 獲得匹配元素集合中每個元素緊鄰的同輩元素。 |
| .nextAll() | 獲得匹配元素集合中每個元素之后的所有同輩元素，由選擇器進行篩選（可選）。 |
| .nextUntil() | 獲得每個元素之后所有的同輩元素，直到遇到匹配選擇器的元素為止。 |
| .not() | 從匹配元素集合中刪除元素。 |
| .offsetParent() | 獲得用於定位的第一個父元素。 |
| .parent() | 獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）。 |
| .parents() | 獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選）。 |
| .parentsUntil() | 獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。 |
| .prev() | 獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。 |
| .prevAll() | 獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。 |
| .prevUntil() | 獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。 |
| .siblings() | 獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。 |
| .slice() | 將匹配元素集合縮減為指定范圍的子集。 |
（表格內容摘自w3school.com.cn）
在操作頁面其他元素是最常用的幾個分別是：.parent() , .children() , .prev() , .next() 。
一般來說我在需要寫一個遍歷的時候就先寫一個html測試頁面，用相同的結構來測試代碼。如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery遍歷測試</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".elan").css("font-weight", "bold"); $(".elan").bind("click", this, function() { $(this).css("font-weight", "normal"); $(this).parent().parent().parent().parent().prev().css("font-weight", "normal"); }); $(".elan-top").css("font-weight", "bold"); $(".elan-top").bind("click", this, function() { $(this).css("color", "green"); $(this).parent().children("td").children("table").children("tbody").children("tr").children(".elan").css("color", "green"); }); }); function tdonclick(obj) { $(obj).parent().parent().parent().parent().prev().css("background-color", "red"); } </script> </head> <body> <table> <tr> <td class="elan-top">父表（1，1）</td> <td><table> <tr> <td onClick="tdonclick(this);">子表（1，1）</td> </tr> <tr> <td class="elan">子表（1，2）</td> </tr> </table></td> </tr> <tr> <td class="elan-top">父表（2，1）</td> <td><table> <tr> <td onClick="tdonclick(this);">子表（2，1）</td> </tr> <tr> <td class="elan">子表（2，2）</td> </tr> </table></td> </tr> </table> </body> </html>
上面的代碼要實現的效果就是點擊每個“子表（*，2）”元素時，自己和同行的“父表（*，1）”粗體字變為普通字體；點擊“父表（*，1）”則自己和同行的class=“elan”的子表元素變為綠色；點擊“子表（*，1）”元素時，“父表（*，1）”元素背景色變為紅色。
猛的一看初學者肯定會覺得上面所有代碼里面都多了一層遍歷，其實jQuery的遍歷是根據頁面DOM進行的，這也是我們經常會出錯的地方，比如這里，表格其實還有一個<tbody></tobody>的元素節點，所以每次遍歷到<tr></tr>的時候我們都要將這個加進去。
*這里推薦大家一種方便的查找遍歷節點的方法，IE8+，Chrome瀏覽器都提供了開發者工具，我們可以先將網頁結構編寫好，然后在這里面進行調試，打開開發者工具（F12），那里面會將頁面的DOM元素一一列出，只要細心查找，一般都能解決遍歷的問題。如下圖所示，是IE8中的開發者工具顯示的頁面結構，這里可以很容看到遍歷的節點。
