Updated April 19, 2023
Introduction to jQuery nextUntil
The jQuery nextUntil() function is used to get all the next sibling elements between selector and stop. This function is a built-in function in jQuery. The jQuery nextUntil() function search through the DOM tree for the sibling and stop when it reaches an element that matched by the function’s parameter. If the selector is not passed to the nextUntil() function, then all the next sibling will be selected, which means it perform same as nextAll().
Syntax:
$(selector).nextUntil(stop, filter);Parameters:
- stop: This is an optional parameter. It specifies the selector, element or jQuery object which indicates where to stop the search for next match sibling elements.
- filter: This is an optional parameter. It specifies the filter expression to drill down the search for next match sibling elements. The multiple filter expression can be pass with the comma separator to get the multiple sibling elements.
- It does not take any parameters.
Return Value:
The return value of this function is all the siblings between selector and stop.
Working of jQuery nextUntil() Function
- The jQuery nextUntil() function accepts two parameter.
- Suppose we have a div element in the HTML page that contains have some siblings (same parent) elements “p” and “span”.
- Now we need to get all the siblings of the div elements, so we can use the nextUntil() function as “$(“div”).nextUntil()”, which return all the siblings of the div elements as “p” and “span” with contents.
Examples of jQuery nextUntil() Function
Given below are the examples of jQuery nextUntil:
Example #1
Example of jQuery nextUntil() function to get the sibling 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 nextUntil() function </title>
<script>
function disp()
{
var content = $( "div" ).nextUntil().text();
alert( content );
}
</script>
</head>
<body>
<h3> This an example of nextUntil() 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 sibling of div element </button>
</body>
</html>Output:
Once we click on the button, the output:
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 a sibling. Next the nextUntil() function is used to get the sibling of the div elements as $( “div” ).nextUntil().text();”, that return “div” and “button” elements which display by using the text() function and display in the alert, once we click on the button.
Example #2
Example of jQuery nextUntil() function to the sibling of div with stop 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 nextUntil() function </title>
<script>
function disp()
{
var content = $("div").nextUntil(“span”).css({
"color": "red",
"border": "2px solid black"
});
}
</script>
</head>
<body>
<h3> This an example of nextUntil() 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 sibling of div element </button>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code there is a “div” elements which have “p”, “span” and “button” as the sibling elements. Next the nextUntil() function is used to get the sibling of the “div” element and “span” is pass as stop element, so the function select only “p” sibling among “p”, “span” and “button” siblings and apply the format style to “p” element, as we can see in the above output.
Example #3
Example of jQuery nextUntil() function to the sibling of li element with stop element and filter 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 nextUntil() function </title>
<script>
function disp()
{
var content = $( "li" ).nextUntil("li","p").css({
"color": "black",
"border": "2px solid black",
"background-color" : "yellow"
});
}
</script>
</head>
<body>
<h3> This an example of nextUntil() 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>
<p> paragraph </p>
<span> span </span>
<ul>
<li> Bell perpper </li>
<li> Chili pepper </li>
</ul>
</ul>
</div>
<button onclick = "disp()"> Get sibling of div element </button>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code there are a “li” elements which have “p” and “span” as the sibling elements. Next the nextUntil() function is used to get the sibling of the “div” element and also “li” is pass as stop element and “p” as filter element as “$( “li” ).nextUntil(“li”,”p”)”, so the function select only “p” sibling among all siblings and apply the format style to “p” element, as we can see in the above output.
Conclusion
The jQuery nextUntil() function is a built in function, which is used to gets all the next sibling elements between selector and stop.
Recommended Articles
This is a guide to jQuery nextUntil. Here we discuss the introduction, working of jQuery nextUntil() function and examples respectively. You may also have a look at the following articles to learn more –
