jQuery遍歷之each()
jQuery是一個合集對象，透過$()方法找到指定的元素集合後可以進行一系列的運算。例如我們操作$("li").css('') 給所有的li設定style值，因為jQuery是一個合集對象，所以css方法內部就必須封裝一個遍歷的方法，稱為隱式迭代的過程。要一個一個為合集中每一個li設定顏色，這裡方法就是each
.each() 方法就是一個for迴圈的迭代器，它會迭代jQuery物件合集中的每一個DOM元素。每次回呼函數執行時，會傳遞目前迴圈次數作為參數(從0開始計數
所以大體上了解3個重點：
#each是一個for迴圈的包裝迭代器
each透過回呼的方式處理，並且會有2個固定的實參，索引與元素
each回呼方法中的this指向當前迭代的dom元素
看一個簡單的案例
<ul>
<li>php.cn</li>
<li>Aaron</li>
</ul>
開始迭代li，循環2次
$("li").each(function(index, element) {
index 索引0,1
element是對應的li節點li ,li
this 指向的是li
})
這樣可以在循環體會做一些邏輯操作了，如果需要提前退出，可以以通過返回false以便在回調函數內中止循環
下面我們來寫一段程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.left {
width: auto;
height: 150px;
}
.left div {
width: 150px;
height: 120px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>each方法</h2>
<div class="left first-div">
<div class="div">
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
<div class="div">
<ul>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</div>
<br/>
<button>点击：each方法遍历元素</button>
<button>点击：each方法回调判断</button>
<script type="text/javascript">
$("button:first").click(function() {
//遍历所有的li
//修改每个li内的字体颜色
$("li").each(function(index, element) {
$(this).css('color','red')
})
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//遍历所有的li
//修改偶数li内的字体颜色
$("li").each(function(index, element) {
if (index % 2) {
$(this).css('color','blue')
}
})
})
</script>
</body>
</html>
