jQuery prevAll() Method

Quiz

The prevAll() method in jQuery selects all the previous sibling elements of each element in the jQuery object. A sibling is an element that shares the same parent with another element. It traverses upwards starting from the current element and selects all the preceding siblings until it reaches the first sibling.

This method selects all the preceding siblings, not just only the immediate preceding sibling. To select the immediate preceding sibling, you can use the prev() method.

Syntax

Following is the syntax of prevAll() method in jQuery −

$(selector).prevAll(filter)

Parameters

This method accepts the following optional parameter −

filter: A selector expression to filter the all preceding sibling elements.

Example 1

In the following example, we are using the prevAll() method to return all previous sibling elements of p element −

<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>

When we execute the above program, all the elements above the p element will be highlighted with green text and borders.

Example 2

In this example, we are returning all the elements with class name "one", that are previous siblings of the p element with class named "start" −

<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>

After executing the above program, the elements with class name "one" will be highlighted with green text and borders.

Example 3

Here, we are using the "filter" parameter to return all previous siblings with class names "one", "two", and "third", that are previous siblings of the div element with class name "start" −

<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>

After executing the above program, the elements with class name "one", "two", and "three" will be highlighted with green text and borders.

jquery_ref_traversing.htm

Print Page