jQuery随笔记-遍历
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中的开发者工具显示的页面结构，这里可以很容看到遍历的节点。
