jQuery 元素 + next 选择器

jQuery 中的元素 + next 选择器用于选择特定元素的紧邻下一个兄弟元素。

为了更好地理解这一点，让我们考虑以下两个示例场景：

场景 1：在 <div> 元素之后紧跟着两个 <p> 元素。

$("div + p"):  This will only select the first <p> element, because it only selects one element (the other <p> element will be ignored).

场景 2：如果您有一个 <div> 元素，紧跟着一个 <h2> 元素，然后是一个 <p> 元素。

$("div + p"):  This will not select the <p> element, because the immediate element of <div> is <h2>, not <p>.

此选择器仅选择紧邻的下一个兄弟元素。如果您需要选择多个兄弟元素或非紧邻的元素，请考虑使用其他遍历方法，例如next()、nextAll() 或nextUntil()。

语法

以下是 jQuery 元素 + next 选择器的语法：

("element + next")

参数

以下是上述语法的描述：

元素：任何有效的 jQuery 选择器。
next：指定应为 `element` 参数的紧邻元素的元素。

示例 1

在此示例中，我们使用 jQuery 元素 + next 选择器来选择紧邻 <div> 元素的 <p> 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("div + p").css("background-color", "yellow");
      });
    </script>
</head>
<body>
    <div style="border: 2px solid black;">Div element.</p></div>
    <p>Paragraph element.</span>
    <p>This is another paragraph.</p>
</body>
</html>

执行上述程序后，我们可以看到紧邻的 <p> 元素被选中并突出显示。

示例 2

在此示例中，我们选择紧邻 <div> 元素的 <p> 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("div + p").css("background-color", "yellow");
      });
    </script>
</head>
<body>
    <div style="border: 2px solid black;">Div element.</p></div>
    <h2>Heading element.</h2>
    <p>Paragraph element.</p>
</body>
</html>

上述程序将不会选择 <p> 元素，因为 <div> 元素的下一个元素是 <h2>。

jquery_ref_selectors.htm

打印页面