jQuery next() 方法

next() 方法是 jQuery 中的一个内置方法，它返回所选元素的下一个同级元素。此方法向前遍历 DOM 元素的下一个同级元素。

语法

此方法接受一个可选参数，该参数用于指定一个选择器表达式，以缩小下一个同级元素的搜索范围。

让我们看一些示例来理解 next() 方法的工作原理。

示例 1

在此示例中，有一个 div 元素，其中包含三个子元素：一个 ul 元素、一个 标题 h2 和一个 段落元素。在这里，我们使用 next() 方法来获取 h2 元素的下一个同级元素。我们没有使用 next() 方法的可选参数。

点击给定的按钮后，next() 方法将返回 p 元素，因为它是标题 h2 的紧邻下一个同级元素。

输出

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

单击给定按钮后，输出将是 -

示例 2

在此示例中，我们使用 next() 方法的可选参数来缩小搜索范围。这里有一个 div 元素，其中包含多个子元素。我们正在查找 h2 元素的下一个同级元素。有多个 h2 标题元素，它们有不同的同级元素。但是，我们将 p 元素作为 next() 方法的可选参数传递。因此，该方法将仅返回作为 h2 元素紧邻下一个同级元素的 p 元素。

输出

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

在上图中，我们可以注意到 h2 元素的同级元素。但是，该方法将仅返回 p 元素，因为我们将 p 元素作为 next() 方法的可选参数传递。点击给定的按钮后，输出将是：

Example3

这是使用 next() 方法的另一个示例。点击给定的按钮后，next() 方法将触发并开始遍历 DOM 元素。该方法将返回每个 div 元素的紧邻下一个同级元素，并将相应 div 的背景颜色更改为红色。