在操作 DOM 时,很多时候我们需要对“同一类型”的所有元素进行相同的操作。如果通过 JavaScript 来实现,我们往往都是先获取元素的长度,然后使用循环方法来访问每一个元素,代码量比较大。在 jQuery 中,我们可以使用 each() 方法轻松实现元素的遍历操作。
语法:
each() 方法接收一个匿名函数作为参数,该函数有两个参数:index、element。
如果需要退出 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>
默认情况下,预览效果如图 1 所示。
我们点击【添加内容】按钮后,此时预览效果如图 2 所示。
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() 方法用于设置元素中的文本内容,我们之后会详细介绍。
举例:为每个 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>
默认情况下,预览效果如图 3 所示。
我们点击【添加内容】按钮后,此时预览效果如图 4 所示。
举例:为每个 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>
默认情况下,预览效果如图 5 所示。
我们点击【添加背景】按钮后,此时预览效果如图 6 所示。