jQuery遍歷之each()
jQuery是一個合集對象，通過$()方法找到指定的元素合集后可以進行一系列的操作。比如我們操作$("li").css('') 給所有的li設置style值，因為jQuery是一個合集對象，所以css方法內部就必須封裝一個遍歷的方法，被稱為隱式迭代的過程。要一個一個給合集中每一個li設置顏色，這里方法就是each
.each() 方法就是一個for循環(huán)的迭代器，它會迭代jQuery對象合集中的每一個DOM元素。每次回調函數執(zhí)行時，會傳遞當前循環(huán)次數作為參數(從0開始計數
所以大體上了解3個重點：
each是一個for循環(huán)的包裝迭代器
each通過回調的方式處理，并且會有2個固定的實參，索引與元素
each回調方法中的this指向當前迭代的dom元素
看一個簡單的案例
<ul>
<li>php.cn</li>
<li>Aaron</li>
</ul>
開始迭代li，循環(huán)2次
$("li").each(function(index, element) {
index 索引 0,1
element是對應的li節(jié)點 li,li
this 指向的是li
})
這樣可以在循環(huán)體會做一些邏輯操作了，如果需要提前退出，可以以通過返回 false以便在回調函數內中止循環(huán)
下面我們來寫一段代碼：
<!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>
