jQuery遍歷之each()
jQuery是一個合集對象，通過$()方法找到指定的元素合集后可以進(jìn)行一系列的操作。比如我們操作$("li").css('') 給所有的li設(shè)置style值，因為jQuery是一個合集對象，所以css方法內(nèi)部就必須封裝一個遍歷的方法，被稱為隱式迭代的過程。要一個一個給合集中每一個li設(shè)置顏色，這里方法就是each
.each() 方法就是一個for循環(huán)的迭代器，它會迭代jQuery對象合集中的每一個DOM元素。每次回調(diào)函數(shù)執(zhí)行時，會傳遞當(dāng)前循環(huán)次數(shù)作為參數(shù)(從0開始計數(shù)
所以大體上了解3個重點：
each是一個for循環(huán)的包裝迭代器
each通過回調(diào)的方式處理，并且會有2個固定的實參，索引與元素
each回調(diào)方法中的this指向當(dāng)前迭代的dom元素
看一個簡單的案例
<ul>
<li>慕課網(wǎng)</li>
<li>Aaron</li>
</ul>
開始迭代li，循環(huán)2次
$("li").each(function(index, element) {
index 索引 0,1
element是對應(yīng)的li節(jié)點 li,li
this 指向的是li
})
這樣可以在循環(huán)體會做一些邏輯操作了，如果需要提前退出，可以以通過返回 false以便在回調(diào)函數(shù)內(nèi)中止循
具體的操作，請參考右邊的代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; 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://idcbgp.cn/static/lib/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方法回調(diào)判斷</button>
<script type="text/javascript">
$("button:first").click(function() {
//遍歷所有的li
//修改每個li內(nèi)的字體顏色
$("li").each(function(index, element) {
$(this).css('color','red')
})
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//遍歷所有的li
//修改偶數(shù)li內(nèi)的字體顏色
$("li").each(function(index, element) {
if (index % 2) {
$(this).css('color','blue')
}
})
})
</script>
</body>
</html>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
