jQuery element + next Selector

Last Updated : 14 Nov, 2022

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