jQuery |元素 + 下一个选择器

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

例如：

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

句法：

$("element + next")

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

返回值：这将返回具有指定更改的选定元素。

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

HTML

 

    
    
   
    
        $(document).ready(function() {
         $("div + p").css("background-color",
                          "lightgreen");
        });
    
   
    
        body {
            width: 80%;
            height: 40%;
            padding: 10px;
            border: 2px solid green;
            font-size: 20px;
        }
         
        div {
            border: 1px solid green;
            padding: 10px;
        }
    

 

 
    Welcome to GfG.!
     
This is first paragraph element.
 
     
This is second paragraph element.
 
 

 

输出：

示例 2：此处，标题元素位于段落和 div 元素之间。所以“p”元素不会发生变化。

HTML

 

    
  
   
    
        $(document).ready(function() {
            $("button").click(function() {
                $("div + p").css("background-color",
                                 "lightgreen");
            });
 
        });
    
    
        body {
            width: 80%;
            height: 40%;
            padding: 10px;
            border: 2px solid green;
            font-size: 20px;
        }
         
        div {
            border: 1px solid green;
            padding: 10px;
        }
    

 

 
    Welcome to GfG.!
    Heading element ios here.
     
This is first paragraph element.
 
     
This is second paragraph element.
 
    Submit
 

 

输出：

点击前：

点击后：