jQuery each() 方法

2025年3月17日 | 阅读 3 分钟

jQuery 中的 each() 方法指定一个函数,该函数会为每个匹配的元素运行。它是 JQuery 中广泛使用的遍历方法之一。使用此方法,我们可以迭代 jQuery 对象的 DOM 元素,并为每个匹配的元素执行一个函数。

each() 接受一个参数 function(index,element),它是一个回调函数,为每个选定的元素执行。此函数还可选择需要两个参数:索引和元素。因此,我们必须向 each() 方法传递一个回调函数。

我们还可以从回调函数中返回 false,以提前停止循环。

语法

参数值

each() 方法中使用的参数值定义如下。

function(index,element): 这是一个强制参数。它是一个回调函数,为每个选定的元素执行。它有两个参数值,定义如下。

  • index: 它是一个整数值,指定选择器的索引位置。
  • element: 它是当前元素。我们可以使用此关键字来引用当前匹配的元素。

让我们看一些示例来清楚地理解 each() 方法。

示例 1

在此示例中,单击按钮时将触发 each() 方法。我们将此方法应用于 li 元素。因此,此方法将迭代每个 li 元素。该函数为每个选定的 li 执行,并使用警报框显示相应 li 元素的文本。

这里,我们没有使用回调函数的参数值。

输出

立即测试

执行上述代码后,输出将是 -

jQuery each() method

单击按钮后,将显示如下警报。

jQuery each() method

同样,由于有四个 li 元素,将显示四个警报框。

示例 2

在此示例中,我们使用回调函数的参数值 indexelement

我们将 each() 方法应用于 li 元素。因此,该方法将从索引 0 开始迭代 li 元素。它将对每个选定的 li 元素执行,并更改相应元素的背景颜色。

一旦函数返回 false,迭代就会停止。这里有六个 li 元素,当函数到达 id = "i4" 的元素时停止。尽管它是第四个元素,但索引从 0 开始,因此元素的位置是 3

输出

立即测试

执行上述代码并单击给定按钮后,输出将是 -

jQuery each() method
下一主题jQuery eq() 方法