在操作DOM时，很多时候我们需要对“同一类型”的所有元素进行相同的操作。如果使用JavaScript来实现，我们往往都是先获取元素的长度，然后使用循环来访问每一个元素，代码量比较大。

在jQuery中，我们可以使用each()方法轻松实现元素的遍历操作。

语法：

$().each(function(index, element){
    ……
})

说明：

each()方法接收一个匿名函数作为参数，该函数有两个参数：index，element。

index是一个可选参数，它表示元素的索引号（即下标）。通过形参index以及配合this关键字，我们就可以轻松操作每一个元素。此外注意一点，形参index是从0开始的。

element是一个可选参数，它表示当前元素，可以使用(this)代替。也就是说，(element)等价于$(this)。

如果需要退出each循环，可以在回调函数中返回false，也就是return false即可。

上面语法是固定形式，如果小伙伴们的JavaScript基础太差实在没法理解的话，在实际开发中直接搬过去就能用了。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("li").each(function (index, element) {
                    var txt = "第" + (index + 1) + "个li元素";
                    $(element).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()方法的参数是一个匿名函数：function(index, element){}。没错，函数实际上也可以当做参数。对于这种形式，一开始很多新手没法理解，不过等我们慢慢深入原生JavaScript就会熟悉了，这里暂时只需要“套用”就行。

$("li").each(function (index, element) {
    var txt = "第" + (index + 1) + "个li元素";
    $(element).text(txt);
});

实际上，上面代码可以等价于：

$("li").each(function (index) {
    var txt = "第" + (index + 1) + "个li元素";
    $(this).text(txt);
});

也就是说，对于each()方法中的回调函数，如果你想省略第二个参数，可以在内部使用$(this)代替。对于这两种等价代码，我们在实际开发中经常会碰到，大家一定要记住。

此外，text()方法用于设置元素中的文本内容，我们在“5.3 内容操作”这一节会详细介绍。

举例：为每个li添加内容

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            //定义数组
            var arr = ["HTML", "CSS", "JavaScript", "jQuery", "Vue.js"];
            $("#btn").click(function () {
                //将数组元素一一赋值给对应索引号的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>

默认情况下，浏览器预览效果如下图所示。

当我们点击【添加内容】按钮后，此时预览效果如下图所示。

举例：为每个li设置不同的背景颜色

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-1.12.4.min.js" ></script>
    <script>
        $(function(){
            //定义颜色数组
            var colors=["red","orange","yellow","green","blue"]; 
            //为元素添加背景颜色
            $("#btn").click(function(){   
                $("li").each(function(index){
                    $(this).css("background-color",colors[index]);
                });
            });
        })
    </script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <input id="btn" type="button" value="添加背景" />
</body>
</html>

默认情况下，预览效果如下图所示。

当我们点击【添加内容】按钮后，此时预览效果如下图所示。