jQuery next() 方法

jQuery 中的next()方法用於選擇選定集合中每個元素緊跟其後的同級元素。

同級元素是指屬於同一父元素的元素。換句話說，具有相同父元素的元素是同級元素。

此方法遍歷 DOM 以查詢下一個同級元素。只有匹配指定選擇器（如果提供）的下一個同級元素才會被選中。

語法

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

$(selector).next(filter)

引數

此方法接受以下可選引數：

filter: 用於篩選下一個同級元素的選擇器表示式。它將搜尋範圍縮小到匹配特定條件，例如類、ID、元素型別等。

示例 1

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

<html>
<head>
  <script src="https://code.jquery.com/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.jquery.com/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.jquery.com/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

列印頁面