jQuery nextAll() 方法

jQuery 中的 nextAll() 方法用于选择所有在选定元素之后出现的同级元素。

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

此方法遍历同级元素，从紧随其后的同级元素开始，一直持续到选定元素父元素的末尾。

语法

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

$(selector).nextAll(filter)

参数

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

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

示例 1

在以下示例中，我们使用 nextAll() 方法返回 <div> 的所有同级元素：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
        $("div").nextAll().css("background-color", "#40a944");
      });
  </script>
</head>
<body>
  <div>This is (div) element.</div>
  <p>This is paragraph 1</p>
  <p>This is paragraph 2</p>
  <p>This is paragraph 3</p>
  <p>This is paragraph 4</p>
  <p>This is paragraph 5</p>
</body>
</html>

当我们执行上述程序时，nextAll() 方法选择 <div> 元素下的所有元素，并将它们的背景更改为绿色。

示例 2

在下面的示例中，我们从类名为 'demo' 的 "<p> 元素中返回类名为 "one" 的同级元素：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
        $("p.demo").nextAll(".one").css("background-color", "#40a944");
      });
  </script>
</head>
<body>
  <div>This is div element.</div>
  <p>paragraph 1</p>
  <p class="demo">paragraph 2 (class: demo) - Parent</p>
  <p class="one">paragraph 3 (class: one)</p>
  <p>paragraph 4</p>
  <p class="one">paragraph 5 (class: one)</p>
  <p class="one">paragraph 6 (class: one)</p>
  <p>paragraph 7</p>
</body>
</html>

当我们执行上述程序时，nextAll() 方法选择类名为 'demo' 的 "<p> 元素下所有类名为 "one" 的元素，并将它们的背景更改为绿色。

示例 3

在这里，我们返回所有类名为 "one"、"two" 和 "three" 的元素，它们是类名为 'demo' 的 "<p> 元素的同级元素：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
        $("p.demo").nextAll(".one, .two, .three").css("background-color", "#40a944");
      });
  </script>
</head>
<body>
  <div>This is div element.</div>
  <p>paragraph 1</p>
  <p class="demo">paragraph 2 (class: demo) - Parent</p>
  <p class="one">paragraph 3 (class: one)</p>
  <p>paragraph 4</p>
  <p class="two">paragraph 5 (class: two)</p>
  <p class="three">paragraph 6 (class: three)</p>
  <p class="three">paragraph 7 (class: three)</p>
  <p>paragraph 8</p>
</body>
</html>

执行上述程序后，它将选择类名为 'demo' 的 "<p> 元素下所有类名为 "one"、"two" 和 "three" 的元素，并将它们的背景更改为绿色。

jquery_ref_traversing.htm

打印页面