jQuery element + next选择器

jQuery中的(“element + next”)选择器用于选择指定 “元素 “的下一个元素。这个选择器只在 “下一个 “元素被放在指定元素之后时才起作用。

示例:

如果语句是$(“div + p”)，那么这将只选择紧挨着 “div “的第一个 “p “元素，其他 “p “元素将被忽略。
但是，如果声明是$(“div + p”)，并且在选定的 “div “和 “p “元素之间放置了一个 “h1″，那么这个选择器将不起作用，”p “元素将保持无效。

语法:

$("element + next")

参数：这里，参数是必需的，这将指定任何有效的元素。

返回值：这将返回具有指定变化的选定元素。

示例1：这里的段落元素就在div元素的旁边。

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

输出:

jQuery element + next选择器

例子2：这里，标题元素位于段落和div元素之间。因此，”p “元素不会发生任何变化。

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