jQuery prevAll() 方法

jQuery 中的 prevAll() 方法用於選擇 jQuery 物件中每個元素之前的所有兄弟元素。兄弟元素是指與另一個元素共享相同父元素的元素。它從當前元素開始向上遍歷，並選擇所有前面的兄弟元素，直到到達第一個兄弟元素。

此方法選擇所有前面的兄弟元素，而不僅僅是緊鄰的前一個兄弟元素。要選擇緊鄰的前一個兄弟元素，可以使用 prev() 方法。

語法

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

$(selector).prevAll(filter)

引數

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

filter: 一個選擇器表示式，用於過濾所有前面的兄弟元素。

示例 1

在以下示例中，我們使用 prevAll() 方法返回 p 元素之前的所有兄弟元素：

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        $("p").prevAll().css({"color": "#40a944", "border": "2px solid #40a944"});
    });
  </script>
</head>
<body>
  <div>Div element.</div>
  <span>Span element.</span>
  <h2>Heading element.</h2>
  <p>Paragraph element.</p>
</body>
</html>

當我們執行上述程式時，p 元素上方的所有元素都將以綠色文字和邊框突出顯示。

示例 2

在此示例中，我們返回所有類名為 "one" 的元素，這些元素是類名為 "start" 的 p 元素之前的兄弟元素：

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        $("p.start").prevAll(".one").css({"color": "#40a944", "border": "2px solid #40a944"});
    });
  </script>
</head>
<body>
  <p>Paragraph element.</p>
  <p class="one">Paragraph element (with "start" one).</p>
  <p class="one">Paragraph element (with "start" one).</p>
  <p>Paragraph element.</p>
  <p class="start">Paragraph element (with "start" class).</p>
  <p>Paragraph element.</p>
</body>
</html>

執行上述程式後，類名為 "one" 的元素將以綠色文字和邊框突出顯示。

示例 3

這裡，我們使用 "filter" 引數返回所有類名為 "one"、"two" 和 "third" 的元素，這些元素是類名為 "start" 的 div 元素之前的兄弟元素：

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        $("div.start").prevAll(".one, .two, .three").css({"color": "#40a944", "border": "2px solid #40a944"});
    });
  </script>
</head>
<body>
  <p class="three">Paragraph element.</p>
  <p>Paragraph element.</p>

  <h3 class="two">Heading element.</h3>
  <h3>Heading element.</h3>

  <span class="one">Span element.</span>

  <div class="start">Div element (with "start" class)</div>
</body>
</html>

執行上述程式後，類名為 "one"、"two" 和 "three" 的元素將以綠色文字和邊框突出顯示。

jquery_ref_traversing.htm

列印頁面