jQuery next() example

jQuery next() method is used to get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

Syntax

.next( [selector ] )
selector -  A string containing a selector expression to match elements against.

Examples

Example 1

Find the very next sibling of each disabled button and change its text "this button is disabled".
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>next demo</title>
    <style>
        span {
            color: blue;
            font-weight: bold;
        }

        button {
            width: 100px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <div><button disabled="disabled">First</button> - <span></span></div>
    <div><button>Second</button> - <span></span></div>
    <div><button disabled="disabled">Third</button> - <span></span></div>

    <script>
        $("button[disabled]").next().text("this button is disabled");
    </script>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Example 2

Find the very next sibling of each paragraph. Keep only the ones with a class "selected".
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>next demo</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <p>Hello</p>
    <p class="selected">Hello Again</p>
    <div><span>And Again</span></div>

    <script>
        $("p").next(".selected").css("background", "yellow");
    </script>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

References

Comments