jQuery each()的用法（附带实例）

在操作 DOM 元素时，有时需要对同一标记的全部元素进行统一的操作。在传统 JavaScript 中，遍历节点首先获取元素的总长度，之后通过 for 循环语句来访问其中的某个元素，书写的代码较多，相对比较复杂。

在 jQuery 中，可以直接使用 each() 方法来遍历元素，它的语法格式为：

each(callback)

callback() 是一个函数，该函数可以接收一个形参 index，这个形参是遍历元素的序号，序号从 0 开始。如果要访问元素属性，可以借助形参 index 配合 this 关键字来实现对元素属性的设置或获取。

【实例】使用 each() 方法遍历元素 <img>。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中，使用 <img> 标记添加 5 张图片，代码如下：

<img height="60" src="images/01.jpg" width="80" />
<img height="60" src="images/02.jpg" width="80" />
<img height="60" src="images/03.jpg" width="80" />
<img height="60" src="images/04.jpg" width="80" />
<img height="60" src="images/05.jpg" width="80" />

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，使用 each() 方法遍历 <img> 元素，给每个 <img> 元素添加一个 title 属性，即鼠标指针移动到图片上时显示提示信息。具体代码如下：

$("img").each(function(index){
    $(this).attr("title","第"+(index+1)+"张图片");
});

运行本实例，将显示下图所示的效果：

图 1 使用each()方法遍历元素<img>

jQuery each()的用法（附带实例）

相关文章