jQuery prevAll() method

The prevAll() method is jQuery's inbuilt function that returns all previous siblings of the selected element. This method traverses backward along with the previous siblings of DOM elements.

Syntax

This method accepts an optional parameter that specifies a selector expression that narrows down the searching of previous siblings. If we have to return multiple siblings, we can separate every expression with a comma.

Let's see some of the illustrations to understand the working of the prevAll() method.

Example1

It is a simple example of using the prevAll() method. Here, there is a div element, including four child elements that are a ul element, a heading h2, and two paragraph elements. We are using the prevAll() method to get the previous siblings of the p element. We are not using the optional parameter of the prevAll() method.

We have to click the given button to see the effect.

<!DOCTYPE html>
<html>
<head>
<style>
.main * {
display: block;
font-size: 20px;
position: relative;
border: 2px solid black;
color: black;
padding: 10px;
margin: 17px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
function fun(){
$(document).ready(function(){
$("p").prevAll().css({"color": "blue", "border": "3px dashed blue"});
});
}
</script>
</head>

<body class = "main"> body
<div id = "div1"> div element
<ul> ul element </ul>
<h2> Heading h2 </h2>
<p> Paragraph element1 </p>
<p> Paragraph element2 </p>
</div>
<button onclick = "fun()"> click me </button>
</body>
</html>

Test it Now

Output

After clicking the given button, all previous siblings of the p element will get selected, as shown in the below screenshot -

Example2

In this example, we are using the optional parameter of the prevAll() method to narrow down the search. Here, there is a div element including multiple children. We are passing the p element as the optional parameter of the prevAll() method. So, the method will only return the p elements that are the previous siblings of the h2 element.

<!DOCTYPE html>
<html>
<head>
<style>
.main * { 
  display: block;
  font-size: 20px;
  position: relative;
  border: 2px solid black;
  color: black; 
  padding: 10px;
  margin: 17px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
function fun(){
$(document).ready(function(){
  $("h2").prevAll("p").css({ "color": "blue", "border": "3px dashed blue"});
});
}
</script>
</head>

<body class = "main"> body
  <div id = "div1"> div element
  <p> Paragraph 1 </p>
<span> span element </span>
<p> Paragraph 2</p>
<ul> ul element </ul>
<p> Paragraph 3 </p>
<h2> Heading h2 </h2>
	</div>
<button onclick = "fun()"> click me </button>
  </body>
</html>

Test it Now

Output

After clicking the given button, all previous paragraph siblings of the h2 element will get selected, as shown in the below screenshot -

Example3

In this example, we are using the prevAll() method to select the p siblings of the h2 element. In the output, we can see a paragraph element which is not selected. This is because the corresponding paragraph has the different parent element among others. It does not share the same parent.

<!DOCTYPE html>
<html>
<head>
<style>
.main * { 
  display: block;
  font-size: 20px;
  border: 2px solid black;
  padding: 10px;
  margin: 15px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
function fun(){
$(document).ready(function(){
  $("h2").prevAll("p").css({ "color": "blue", "border": "4px dashed blue"});
});
}
</script>
</head>

<body class = "main"> body
  <div id = "div1"> div element
  <div> div element <p> p element </p> </div>
  
<span> span element </span>
<p> p element </p>
<p> p element </p>
<h2> Heading h2 </h2>
	</div>
<button onclick = "fun()"> click me </button>
  </body>
</html>

Test it Now

Output

After clicking the given button, all previous paragraph siblings of the h2 element will get selected, except one paragraph that has a different parent element, as shown in the below screenshot -