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.
Try it Yourself - Copy paste code in Online HTML Editor to see the result
Try it Yourself - Copy paste code in Online HTML Editor to see the result
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>
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>
Comments
Post a Comment