Updated April 18, 2023
Introduction to jQuery nextall
The jQuery nextAll() function is used to gets all the next siblings elements of the specified selector. The jQuery nextAll() function is a built-in function in jQuery. The jQuery nextAll() function search forward through the DOM tree for all the next siblings of the selector. The nextUntil() function perform same as nextAll() function, if the selector is not passed to the nextUntil() function.
Syntax –
$(selector).nextAll(filter);Parameters –
filter – This is an optional parameter. It specifies the filter expression to drill down the search for the next match sibling elements. The multiple filter expression can be pass with the comma separator to get the multiple sibling elements.
Return value –
The return value of this function is all the next siblings of the selected element.
Working
The JQuery nextAll() function accepts one parameter. Suppose we have a div element in the HTML page that contains have some siblings (whose parent is the same) elements “p” and “span”. Now we need to get all the next siblings of the div elements, so we can use the nextAll() function as “$(“div” ).nextAll()”, which return all the next siblings of the div elements as “p” and “span” with contents.
Examples for the jQuery nextAll() function
Here are the following examples mention below
Example #1
Example of jQuery nextAll() function to get the all next siblings of div element –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery nextAll() function </title>
<script>
function disp()
{
var content = $( "div" ).nextAll().css({
"color" : "red",
"border": "2px solid black"
});
}
</script>
</head>
<body>
<h3> This an example of nextAll() function: </h3>
<div>
<h2> The List of Vegetables are : </h2>
<ol>
<li> Corn </li>
<li> Mushroom </li>
<li> Broccoli </li>
<li> Cucumber </li>
<p> Some more vegetables will be add soon. </p>
</ol>
</div>
<div>
<h2> The List of Fruits are : </h2>
<ol>
<li> Apple </li>
<li> Banana </li>
<li> Cherry </li>
<li> Pome </li>
<p> Some more fruits will be add soon. </p>
</ol>
</div>
<button onclick = "disp()"> Get all the next siblings of div element </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, there are div elements that have “h2”, “ol”, and “li” as the children elements and another “div” element and button as siblings. Next, the nextAll() function is used to get all the next siblings of the div elements as $( “div” ).nextAll();”, that return “div” and “button” elements which are highlighted by using the CSS() function, we can see once we click on the button.
Example #2
Example of jQuery nextAll() function to all the next sibling of div with filter p element –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery nextAll() function </title>
<script>
function disp()
{
var content = $( "div" ).nextAll( "p" ).css({
"background-color": "yellow",
"border": "2px dashed green"
});
}
</script>
</head>
<body>
<h3> This an example of nextAll() function: </h3>
<div>
<p> This is a first paragraph and it is a child of div element. </p>
<span> This is a first span box and it is a child of div element. </span>
</div>
<p> This is a second paragraph and it is a sibling of div element. </p>
<span> This is a second span box and it is a siblingof div element. </span>
<br>
<button onclick = "disp()"> Get all the next siblings of "div" element with filter "p". </button>
</body>
</html>An output of the above code is –
Once we click on the “Get p children” button, the output is –
In the above code, there are “div” elements that have “p”, “span”, and “button” as the sibling elements. Next, the nextAll() function is used to get all the next siblings of the “div” element and “p” is specified as filter element, so the function selects only “p” sibling among “p”, “span” and “button” siblings and applies the format style to “p” element, as we can see in the above output.
Example #3
Example of jQuery nextAll() function to get all the next siblings of multiple elements –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery nextAll() function </title>
<script>
function disp()
{
var content = $( "li, p" ).nextAll().css({
"color": "black",
"border": "2px solid black",
"background-color" : "yellow"
});
}
</script>
</head>
<body>
<h3> This an example of nextAll() function: </h3>
<div>
<h3> The List of Vegetables are : </h3>
<ul>
<li> Cabbage </li>
<li> Greens </li>
<p> paragraph </p>
<span> span </span>
<ul>
<li> Spinach </li>
<li> Collard green </li>
</ul>
<li> Onions </li>
<p> paragraph </p>
<span> span </span>
<ul>
<li> Garlic </li>
<li> Onion </li>
</ul>
<li> Cucumber </li>
<p> paragraph </p>
<span> span </span>
<li> Peppers </li>
<span> span </span>
<p> paragraph </p>
<ul>
<li> Bell pepper </li>
<li> Chili pepper </li>
</ul>
</ul>
</div>
<button onclick = "disp()"> Get all the next siblings of li and p elements. </button>
</body>
</html>An output of the above code is –
Once we click on the “Get p children” button, the output is –
In the above code, there are “li” elements that have “p” and “span” as the sibling elements. Next, the nextAll() function is used to get the siblings of the “li” and “p” elements as $(“li, p”).nextAll()”, so the function select siblings of “li” and “p” elements and apply the format style to selected siblings, as we can see in the above output.
Conclusion
The jQuery nextAll() function is a built-in function, which is used to gets all the next sibling elements of the selected element.
Recommended Articles
This is a guide to jQuery nextall. Here we discuss the Working of the JQuery nextAll() function along with the examples and outputs. You may also have a look at the following articles to learn more –
