jQuery | next() 和 nextAll() 示例

下一个（）

next()是 jQuery 中的一个内置函数，用于返回所选元素的下一个兄弟元素。兄弟姐妹是那些在 DOM 树中具有相同父元素的人。文档对象模型 (DOM) 是万维网联盟标准。这定义了访问 DOM 树中的元素。
句法：

$(selector).next()

参数：它不接受任何参数。
返回值：它返回所选元素的下一个兄弟元素。

显示 next() 方法工作的 jQuery 代码：
代码#1：

  

    
        .next * {
            display: block;
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
        }
    
    
    
        $(document).ready(function() {
            $("h3").next().css({
                "color": "black",
                "border": "2px solid green"
            });
        });
    

  

    
        This is parent element !
        This is first paragraph 
        first span box 
        heading 2 !
        heading 3 !
        This is the second paragraph and next
           sibling to h3 !
    

  

在上面的代码中，“h3”的下一个兄弟元素以绿色突出显示。
输出：

下一个全部()

nextAll()是 jQuery 中的一个内置方法，用于返回所选元素的所有下一个同级元素。
句法：

$(selector).nextAll()

参数：它不接受任何参数。
返回值：它返回所选元素的所有下一个兄弟元素。

显示 nextAll() 方法工作的 jQuery 代码：
代码#2：

  

    
        .next * {
            display: block;
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
        }
    
    
    
        $(document).ready(function() {
            $("h2").nextAll().css({
                "color": "black",
                "border": "2px solid green"
            });
        });
    

  

    
        This is parent element !
        This is first paragraph 
        first span box 
        heading 2 !
        heading 3 !
        This is the second paragraph and next
             sibling to h3 !
    

  

在上面的代码中，“h2”的所有下一个兄弟元素都以绿色突出显示。
输出：