Updated April 19, 2023
Introduction to jQuery prev
The jQuery prev() function is used to get the previous immediate sibling elements of the selected element. The jQuery prev() function is a built-in function in jQuery. The jQuery prev() function search backward the DOM tree for the previous sibling and stop when it reaches an element that matched. If the selector or filter is passed to the prev() function, then it return the previous sibling only which matches that selector.
Syntax:
$(selector).prev(filter);Parameters:
- filter: This is an optional parameter. It specifies the filter expression to drill down the search for match sibling elements. The multiple filter expression can be pass with the comma separator to get the multiple sibling elements.
Return Value:
The return value of this function is the immediate previous siblings.
Working of jQuery prev() Function
- The jQuery prev() function accepts one parameter that is filter. Suppose we have a div element in the HTML page that have some previous siblings (same parent) elements “p” and “span” in the order “p” then “span” and then “div”.
- Now we need to get the immediate previous siblings of the div elements, so we can use the prev() function as “$(“div” ).prev()”, which return the immediate previous siblings of the div elements as “span” with its contents.
Examples of jQuery prev()
Given below are the examples of jQuery prev:
Example #1
Example of jQuery prev() function to get the previous sibling of div element.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery prev() function </title>
<script>
function disp()
{
// prev consider second div element
var content = $( "div" ).prev().text();
alert( content );
}
</script>
</head>
<body>
<h3> This an example of prev() function: </h3>
<div>
<h2> The List of Vegetables are : </h2>
<ol>
<li> Corn </li>
<li> Mushroom </li>
<li> Broccoli </li>
<li> Cucumber </li>
<p> Some more vegetables will be add soon. </p>
</ol>
</div>
<div>
<h2> The List of Fruits are : </h2>
<ol>
<li> Apple </li>
<li> Banana </li>
<li> Cherry </li>
<li> Pome </li>
<p> Some more fruits will be add soon. </p>
</ol>
</div>
<button onclick = "disp()"> Get previous sibling of div element </button>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, there are two div elements that have “h2”, “ol”, and “li” as the children elements and for the second “div” element the first “div” is the immediate previous sibling and for the first “div” element the “h3” is the immediate previous sibling. Next the prev() function is used to get the previous sibling of the div elements as $( “div” ).prev().text();”, that return “h3” and “div” elements which display by using the text() function and display in the alert, once we click on the button.
Example #2
Example of jQuery prev() function to get the previous sibling of div with filter element.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery prev() function </title>
<script>
function filter()
{
var content = $( "p" ).prev("h3" ).css({
"color": "red",
"border": "2px solid black"
});
}
function nofilter()
{
var content = $( "p" ).prev().css({
"color": "red",
"border": "2px solid black"
});
}
</script>
</head>
<body>
<h3> This an example of prev() function: </h3>
<div>
<h3> This is a first heading and it is a child of div element. </h3>
<p> This is a first paragraph and it is a child of div element. </p>
<span> This is a first span box and it is a child of div element. </span>
</div>
<h3> This is a second heading and it is a sibling of div element. </h3>
<span> This is a second span box and it is a sibling of div element. </span>
<p> This is a second paragraph and it is a sibling of div element. </p>
<br>
<button onclick = "nofilter()"> Get previous sibling of p element without filter </button>
<button onclick = "filter()"> Get previous sibling of div element with filter</button>
</body>
</html>Output:
Once we click on the first button, the output is:
Once we click on the second button, the output is:
In the above code there are two “p” elements which have “h3” and “span” as the immediate previous sibling elements. If we click the first button we can see that both of the elements are selected by using prev() function without filter. Next the prev() function is used to get the immediate previous sibling with filter “h3” element, so if we click the second button we can see that only “h3” element is selected and apply the format style.
Example #3
Example of jQuery prev() function to get the previous sibling of “li” element with class to select specific “li” element.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery prev() function </title>
<script>
function disp1()
{
var content = $( "li" ).prev( ).css({
"color": "black",
"border": "2px solid black",
"background-color" : "yellow"
});
}
function disp2()
{
var content = $( "li.select" ).prev().css({
"color": "black",
"border": "2px solid black",
"background-color" : "yellow"
});
}
</script>
</head>
<body>
<h3> This an example of prev() function: </h3>
<div>
<h3> The List of Vegetables are : </h3>
<ul>
<li> Cabbage </li>
<li class = "select" > Greens </li>
<p> paragraph </p>
<span> span </span>
<ul>
<li> Spinach </li>
<li> Collard green </li>
</ul>
<li> Onions </li>
<p> paragraph </p>
<li class = "select" > Cucumber </li>
<p> paragraph </p>
<span> span </span>
<li> Peppers </li>
<p> paragraph </p>
<ul>
<li> Bell perpper </li>
<li> Chili pepper </li>
</ul>
</ul>
</div>
<button onclick = "disp1()"> Get prev sibling of li element </button>
<button onclick = "disp2()"> Get prev sibling of li element with class </button>
</body>
</html>Output:
Once we click on the first button, the output is:
Once we click on the second button, the output is:
In the above code there are a “li” elements which have “p”, “span”, “li” and “ul” elements as the immediate previous sibling elements. If we click the first button we can see that all those elements are selected by using prev() function without any class. Next the prev() function is used to get the immediate previous sibling with class “select” to consider only those “li” selector who have class “select”, so if we click the second button we can see that only “li” and “p” elements are selected and apply the format style.
Conclusion
The jQuery prev() function is a built in function, which is used to get the previous immediate sibling elements of the selected element.
Recommended Articles
This is a guide to jQuery prev. Here we discuss the introduction, working of jQuery prev() function and examples respectively. You may also have a look at the following articles to learn more –
