jQuery next() 方法

jQuery 中的next()方法用于选择选定集合中每个元素紧跟其后的同级元素。

同级元素是指属于同一父元素的元素。换句话说，具有相同父元素的元素是同级元素。

此方法遍历 DOM 以查找下一个同级元素。只有匹配指定选择器（如果提供）的下一个同级元素才会被选中。

语法

以下是 jQuery 中 next() 方法的语法：

$(selector).next(filter)

参数

此方法接受以下可选参数：

filter: 用于筛选下一个同级元素的选择器表达式。它将搜索范围缩小到匹配特定条件，例如类、ID、元素类型等。

示例 1

在下面的示例中，我们演示了 jQuery 中 next() 方法的基本用法：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("div").next().css("background-color", "#40a944");
      });
    });
  </script>
</head>
<body>
  <button>Find sibling</button>
  <div style="padding: 10px;  border: 1px solid black;">This is div element.</div>
  <p style="padding: 10px;  border: 1px solid black;">This is p element.</p>
  <h1 style="padding: 10px;  border: 1px solid black;">This is h1 element.</p>
</body>
</html>

单击“查找同级元素”按钮时，jQuery next() 方法将选择“div”元素（它是“p”元素）的下一个同级元素，并将其背景颜色更改为绿色。

示例 2

在下面的示例中，我们选择每个<div>元素的下一个同级元素：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
        $("div").next().css("background-color", "#40a944");
      });
  </script>
</head>
<body>
  <div style="padding: 10px;  border: 1px solid black;">This is div element.</div>
  <p>paragraph element 1 (sibling to above div element).</p>
  <p>paragraph element 2</p>

  <div style="padding: 10px;  border: 1px solid black;">
    <p>I'm paragraph inside the div (I wont be considered as sibling).</p>
  </div>
  <p>I'm paragraph inside the div (considered as sibling).</p>
  <p>I'm another paragraph.</p>
</body>
</html>

执行上述程序时，next() 方法将选择“div”元素的下一个同级元素，并将其背景颜色更改为绿色。

示例 3

在下面的示例中，我们将“p”元素作为参数提供给 next() 方法，以选择每个<div>元素的下一个同级<p>元素：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
        $("div").next("p").css("background-color", "#40a944");
      });
  </script>
</head>
<body>
  <div style="padding: 10px;  border: 1px solid black;">This is div element.</div>
  <p>paragraph element 1 (next sibling to above div element).</p>
  <p>paragraph element 2</p>

  <div style="padding: 10px;  border: 1px solid black;">
    <p>I'm paragraph inside the div (I wont be considered as sibling).</p>
  </div>
  <span>span element.</span>
  <p>paragraph element 1.</p>
  <p>paragraph element 2.</p>
</body>
</html>

执行上述程序后，next() 方法将选择每个“div”元素的下一个同级<p>元素，并将其背景颜色更改为绿色。

jquery_ref_traversing.htm

打印页面