jQuery | element + next Selector

19 Aug, 2021
The (“element + next”) selector selects in jQuery used to select the just “next” element of the specified “element”. This selector only works when the “next” element is placed just after the specified element. 
For Example: 
If the statement is $(“div + p”) then this will only select the first “p” element which is just next to “div” and the other “p” element are ignored. 
But if the statement is $(“div + p”) and a “h1” is placed in between the selected “div” and “p” element then this selector will not work and “p” element will remain noneffective.
Syntax:  
$("element + next")
Parameter: Here, parameter are required and this will specifies any valid elements.
Return Value: This will return the selected element with the specified change.
Example-1: Here the paragraph element is just next to the div element.  
HTML
<!DOCTYPE html><html> <head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>       <script>        $(document).ready(function() {         $("div + p").css("background-color",                          "lightgreen");        });    </script>       <style>        body {            width: 80%;            height: 40%;            padding: 10px;            border: 2px solid green;            font-size: 20px;        }                 div {            border: 1px solid green;            padding: 10px;        }    </style></head> <body>     <div>Welcome to GfG.!</div>     <p>This is first paragraph element.</p>      <p>This is second paragraph element.</p>  </body> </html>
Output: 
Example-2: Here, heading element is in between the paragraph and the div element. So the no change will take place to the “p” element.  
HTML
<!DOCTYPE html><html> <head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script>       <script>        $(document).ready(function() {            $("button").click(function() {                $("div + p").css("background-color",                                 "lightgreen");            });         });    </script>    <style>        body {            width: 80%;            height: 40%;            padding: 10px;            border: 2px solid green;            font-size: 20px;        }                 div {            border: 1px solid green;            padding: 10px;        }    </style></head> <body>     <div>Welcome to GfG.!</div>    <h1>Heading element ios here.</h1>     <p>This is first paragraph element.</p>      <p>This is second paragraph element.</p>     <button>Submit</button> </body> </html>
Output: 
Before Click: 
After Click: 
 
sagar0719kumar
jQuery-Selectors
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
jQuery | children() with Examples
Scroll to the top of the page using JavaScript/jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
How to get the value in an input text box using jQuery ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React