jQuery Tutorial Tutorials - jQuery .nextUntil() method

jQuery .nextUntil() method

The .nextUntil() method in jQuery is used to get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

jQuery .nextUntil() method Syntax

.nextUntil([selector][,filter])
.nextUntil([element[,filter])
Parameter Type Description
selector Selector selector expression to indicate where to stop matching following sibling elements
element Element, jQuery DOM element or jQuery object indicating where to stop matching following sibling elements
filter Selector selector expression to match elements against

jQuery .nextUntil() method Example

example

Find the sibling elements that follow term 2,until to the next <dt>.

HTML

<dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd class="selected">definition 3-b</dd>
  <dd>definition 3-c</dd>
  <dd class="selected">definition 3-d</dd>
</dl>

jQuery

$("#term-2").nextUntil('dt')

Result

  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

Try now

example

Find the sibling elements that follow term 3 and matched by the selector .selected,until to the next <dt>.

HTML

<dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd class="selected">definition 3-b</dd>
  <dd>definition 3-c</dd>
  <dd class="selected">definition 3-d</dd>
</dl>

jQuery

$("#term-3").nextUntil('dt','.selected');

Result

<dd class="selected">definition 3-b</dd>
<dd class="selected">definition 3-d</dd>
Date：2019-08-26 13:59:00 From:www.Lautturi.com author：Lautturi
.nextAll() method
.not() method