jQuery nextUntil() Method

Last Updated:

jQuery nextUntil() Method

The jQuery nextUntil() method returns all next sibling elements between the selector and stop.

Note: stop is optional.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery nextUntil() Method</h1> <ul> <li>Apple</li> <li>Banana</li> <li>Cheery</li> <li class="start">Dragon fruit</li> <li>Elderberry</li> <li>fig</li> <li>Grapes</li> <li>Honeydew</li> </ul> <script> $(document).ready(function(){ $("li.start").nextUntil().css("color", "red"); }); </script> </body> </html>

Syntax

$(selector).nextUntil(stop, filter);

Parameter Values

ValueTypeExplanation
stop Optional Specifies a string containing a selector expression to indicate where to stop matching preceding sibling elements.
filter Optional Specifies a string containing a selector expression to match elements against.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
nextUntil()YesYesYesYesYesYesYesYesYesYesYesYesYes

nextUntil() with Stop

In the following example, we will return the elements between .start and .end class selectors

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery nextUntil() Method</h1> <ul> <li>Apple</li> <li>Banana</li> <li>Cheery</li> <li class="start">Dragon fruit</li> <li>Elderberry</li> <li>fig</li> <li>Grapes</li> <li class="end">Honeydew</li> </ul> <script> $(document).ready(function(){ $("li.start").nextUntil("li.end").css("color", "red"); }); </script> </body> </html>

Share this Page

Meet the Author