Tutorials References Exercises Videos Menu
Create Website Get Certified Upgrade

jQuery nextUntil() Method

❮ jQuery Traversing Methods

Example

Return all sibling elements between two <li> elements with class name "start" and "stop":

$(document).ready(function(){
  $("li.start").nextUntil("li.stop").css({"color": "red", "border": "2px solid red"});
});

Result:

    ul (parent)
  • li (sibling)
  • li (sibling)
  • li (sibling with class name "start")
  • li (sibling)
  • li (sibling)
  • li (sibling)
  • li (sibling with class name "stop")
Try it Yourself »

Definition and Usage

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

Sibling elements are elements that share the same parent.

The DOM tree: This method traverse forward along siblings of DOM elements.

Note: If both parameters are empty, this method will return all next sibling elements (same as the nextAll() method).

Related methods:

  • next() - returns the next sibling element of the selected element
  • nextAll() - returns all next sibling elements of the selected element


Syntax

$(selector).nextUntil(stop,filter)

Parameter Description
stop Optional. A selector expression, element or jQuery object indicating where to stop the search for next matching siblings elements
filter Optional. Specifies a selector expression to narrow down the search for sibling elements between the selector and stop

Note: To return multiple siblings, separate each expression with a comma.

Try it Yourself - Examples

Narrow down the search
Using both parameters to filter the search for next sibling elements between two arguments.

Return multiple siblings
How to return multiple sibling elements between two arguments.

DOM
Using a DOM element instead of a selector to return all sibling elements two given arguments.

Using the DOM with both parameters
Using a DOM element instead of a selector and both parameters to filter the next sibling search between two arguments.


❮ jQuery Traversing Methods