一般來說我在需要寫一個遍歷的時候就先寫一個html測試頁面，用相同的結構來測試代碼。如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery遍歷測試</t
一般來說我在需要寫一個遍歷的時候就先寫一個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中的開發者工具顯示的頁面結構，這裡可以很容看到遍歷的節點。
