jQuery | prev() & prevAll() with Examples - GeeksforGeeks

13 Feb, 2019
The prev() is an inbuilt function in jQuery which is used to return the previous sibling element of the selected element. Siblings are those having same parent element in DOM Tree. Document Object Model(DOM) is a World Wide Web Consortium standard defined for accessing elements.
prev()
Syntax:
$(selector).prev()

Here selector is the selected element whose previous siblings get returned.Parameters: It does not accept any parameter.Return Value: It returns the previous sibling of the selected element.
<html>  <head>    <style>        .pre * {            display: block;            border: 2px solid lightgrey;            color: black;            padding: 5px;            margin: 15px;        }    </style>    <script src="https://ajax.googleapis.com/ajax/libs/                 jquery/3.3.1/jquery.min.js"></script>    <script>        $(document).ready(function() {            $("h3").prev().css({                "color": "black",                "border": "2px solid green"            });        });    </script></head>  <body class="pre">    <div>        This is parent element !        <p>This is first paragraph </p>        <span>First span box </span>        <h2>heading 2 !</h2>        <h3>heading 3 !</h3>        <p>This is the second paragraph and next sibling to h3 !</p>    </div></body>  </html>
In the above code, previous sibling element of “h3” get highlighted with green color.Output:
prevAll()
The prevAll() is an inbuilt method in jQuery which is used to return all the previous sibling elements of the selected element.Syntax:
$(selector).prevAll()

Here selector is the selected element whose previous siblings get returned.Parameters: It does not accept any parameter.Return Value: It returns all the previous sibling elements of the selected element.
<html>  <head>    <style>        .preAll * {            display: block;            border: 2px solid lightgrey;            color: black;            padding: 5px;            margin: 15px;        }    </style>    <script src="https://ajax.googleapis.com/ajax/libs/                jquery/3.3.1/jquery.min.js"></script>    <script>        $(document).ready(function() {            $("h3").prevAll().css({                "color": "black",                "border": "2px solid green"            });        });    </script></head>  <body class="preAll">    <div>        This is parent element !        <p>This is first paragraph </p>        <span>first span box </span>        <h2>heading 2 !</h2>        <h3>heading 3 !</h3>        <p>This is the second paragraph and next              sibling to h3 !</p>    </div></body>  </html>
In the above code, all the previous sibling elements of “h3” get highlighted with green color.Output:
jQuery-Traversing
JavaScript
JQuery
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
How to change selected value of a drop-down list using jQuery?
Form validation using jQuery
How to change the background color after clicking the button in JavaScript ?
How to Dynamically Add/Remove Table Rows using jQuery ?
How to add options to a select element using jQuery?