在操作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>

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

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