jQuery | element + next Selector

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 the 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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <script src=
        </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>Welcme to GfG.!</div>
        <p>This is first paragraph element.</p>
        <p>This is second paragraph element.</p>
      
    </body>
      
    </html>

    chevron_right

    
    

    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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <script src=
      </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>Welcme 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>

    chevron_right

    
    

    Output:
    Before Click:

    After Click:



    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.