在DOM操作中，有時候我們需要對同一個標簽的全部元素進行統一操作。在JavaScript中，我們往往都是先獲取元素的長度，然後使用循環語句來訪問每一個元素，代碼相對復雜。而在jQuery中，我們可以使用each()方法來輕松實現元素的遍歷操作。
語法：
$().each(callback)
說明：
參數callback是一個function函數。該函數可以接受一個形參index，此形參為遍歷元素的序號（從0開始）。如果需要訪問元素中的屬性，可以借助形參index，然後配合this關鍵字來實現元素屬性的獲取和設置。
each()方法完整語法如下：
$().each(function(index){
……
})
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("li").each(function (index) {
var txt = "這是第" + (index + 1) + "個li元素";
$(this).text(txt);
});
});
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input id="btn" type="button" value="添加內容" />
</body>
</html>
在浏覽器預覽效果如下：
當我們點擊“添加內容”按鈕之後，預覽效果如下：
分析：
在each()方法中，index是一個形參。小伙伴們就會問了，為什麼這個function函數有形參，卻沒有對應實參呢？其實index可以說是一個系統形參，你只需要調用即可，不需要用相應的實參來一一對應，這個有點類似於JavaScript的事件對象event。況且在JavaScript中，形參個數和實參個數是可以不相等的。這些也是非常重要的理論知識，我們在“JavaScript進階教程”再給大家詳細介紹，這裡了解一下即可。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//定義一個數組
var arr = new Array("HTML", "CSS", "JavaScript", "jQuery", "canvas");
//使用each()將數組元素內容一一賦值給對應的li元素
$("li").each(function (index) {
var txt = arr[index];
$(this).text(txt);
});
});
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input id="btn" type="button" value="添加內容" />
</body>
</html>
在浏覽器預覽效果如下：
當我們點擊“添加內容”按鈕之後，預覽效果如下：