jquery nextUntil() method


  Translation results:

next

#英[nekst] 美[nɛkst]

adj. Immediately after; second to; close to; immediately adjacent

adv.Go on;then;behind;sequentially

n.next;next one

prep.Close;behind;next door to…

until

UK[ənˈtɪl] US[ʌnˈtɪl]

prep.Until...;before...

conj.To... Until, before...; until...

jquery nextUntil() methodsyntax

Function: nextUntil() Gets all following sibling elements of each element, but does not include elements matched by selectors, DOM nodes, or passed jQuery objects.

Syntax 1: .nextUntil(selector,filter)

Parameters:

ParametersDescription
selector String value containing a selector expression indicating where to stop matching following sibling elements Mode.
filter String value containing the selector expression used to match the element.

Syntax 2: .nextUntil(element,filter)

Parameters:

ParametersDescription
element Indicates where to stop matching following sibling elements DOM node or jQuery object.
filter String value containing the selector expression used to match elements.

Description: Given a jQuery object that represents a collection of DOM elements, the .nextUntil() method allows us to search the DOM tree for elements following For sibling elements, the search will stop when an element matched by the parameters of this method is encountered. The new jQuery object returned contains all following sibling elements, but does not contain the element matched by the parameter. If the selector does not match or no selector is specified, all following siblings will be selected; if no selector is provided for filtering, the elements selected by this method are the same as the .nextAll() method. As of jQuery 1.6, a DOM node or jQuery object, instead of a selector, can be passed to the .nextUntil() method. This method accepts an optional selector expression as its second parameter. If this parameter is specified, elements will be filtered by detecting whether they match this selector.

jquery nextUntil() methodexample

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

  <dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</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>definition 3-b</dd>
</dl>


<script>
  $("#term-2").nextUntil("dt").css("background-color", "red");
  var term3 = document.getElementById("term-3");
  $("#term-1").nextUntil(term3, "dd").css("color", "blue");
</script>

</body>
</html>
Run instance »

Click the "Run instance" button to view the online instance

Home

Videos

Q&A