jQuery prev() method

The prev() method is an inbuilt method in jQuery, which returns an immediately previous sibling of the selected element. This method traverses backward along with the previous sibling of DOM elements.

Syntax

This method accepts an optional parameter that is used to specify a selector expression that narrows down the searching of the previous sibling.

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

Example1

In this example, there is a div element, including three child elements that are a ul element, a heading h2, and a paragraph element. Here, we are using the prev() method to get the previous sibling of the p element. We are not using the optional parameter of the prev() method.

The prev() method will return the h2 element as it is the immediate previous sibling of paragraph p.

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").prev().css({ "font-size": "30px", "color": "blue", "border": "6px dashed blue"});
});
}
</script>
</head>

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

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

In this example, we are using the optional parameter of the prev() method to narrow down the search. Here, there is a div element, including multiple children. There are many h2 heading elements with different siblings. But we are passing the p element as the optional parameter of the prev() method. So, the method will only return the p elements that are the immediate previous sibling 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").prev("p").css({ "color": "blue", "border": "5px dashed blue"});
});
}
</script>
</head>

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

Test it Now

Output

After the execution of the above code, the output will be -

In the above screenshot, we can notice the siblings of the h2 element. But the method will return only the p element, as we have passed the p element as the optional parameter of the prev() method. After clicking the given button, the output will be -

Example3

It is another example of using the prev() method. The prev() method will trigger on clicking the given button and start traversing through the DOM elements. The method will return the immediate previous sibling of each div element and changes the background-color of corresponding div to red.

<!DOCTYPE html>
<html>
<head>
<style>
div { 
  display: block;
  width: 50px;
  height: 50px;
  font-size: 20px;
  margin: 10px;
  border: 2px solid black;
  float: left;
}
p {
clear: left;
margin: 10px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
var current = $("#d5");
current .css( "background-color", "red");
$("button").click(function(){
  current  = current .prev();
  $("div").css("background", "");
  current.css( "background-color", "red" );
});
});
</script>
</head>

<body>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div id = "d5"> </div>
<p> Click the below button to see the effect. </p>
<p>
<button> click me </button>
</p>
</body>
</html>

Test it Now

Output

On clicking the given button, the jQuery prev() method triggers and starts traversing through the DOM elements.

Next TopicjQuery prevAll() method

← prev next →