Open In App

How to select all next sibling elements of an element using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will discuss how to select all the next sibling elements of an element using jQuery. To select all the next sibling elements of an element, we will use nextAll() method.

The nextAll() method is used to find the next sibling elements of the selected element. The siblings are those having the same parent element in DOM Tree. This method does not accept any parameter and returns all the next sibling elements of the selected element.

Syntax:

$(selector).nextAll()

Approach: First, we will create heading elements and the main div container and inside the main div container, we will add two div containers. When the user clicks on the button, the nextAll() method is called and it selects all the next siblings of the selected element. After selecting the siblings, we add some CSS properties to them.

Example: In this example, we will use nextAll() method.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <script src=
    </script>
    <title>
        How to select all next sibling elements
        of an element using jQuery?
    </title>
    <style>
        .main {
            width: 450px;
            text-align: justify;
            font-size: 18px;
        }
        #GFG {
            padding: 5px 15px;
            margin-top: 20px;
        }
        .Geeks {
            font-size: 18px;
            font-weight: bold;
            color: green;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("#GFG").on('click', function () {
                $("h3").nextAll().addClass("Geeks");
            });
        });
    </script>
</head>
 
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            How to select all next sibling elements
            of an element using jQuery?
        </h3>
        <div class="main">
            <div class="section1">
                HTML stands for HyperText Markup
                Language. It is used to design
                web pages using a markup language.
                HTML is the combination of
                Hypertext and Markup language.
            </div>
            <br>
            <div class="section2">
                Cascading Style Sheets, fondly
                referred to as CSS, is a simply
                designed language intended to
                simplify the process of making
                web pages.
            </div>
        </div>
        <input type="button"
               id="GFG"
               value="Remove Contents">
    </center>
</body>
 
</html>


Output:



Last Updated : 30 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads