jQuery traversal - introduction to the use of nextUntil() method and prevUntil() method_jquery

nextUntil() obtains all following sibling elements of each element. When there are parameters, the search will stop until an element matching the parameters of this method is encountered. The new jQuery object returned contains all following sibling elements, but does not include elements matched by the selector, DOM node, or passed jQuery object. If there are no parameters, all following sibling elements will be selected, which is the same as the .nextAll() method.

Syntax 1:

Copy code The code is as follows:

.nextUntil(selector,filter)

Syntax 2:

Copy code The code is as follows:

.nextUntil(element,filter)

Detailed description
If a jQuery representing a collection of DOM elements is given Object, the .nextUntil() method allows us to search for sibling elements following an element in the DOM tree. The search will stop when an element matched by the method's parameters 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, and 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.

Look at the example first:

Copy the code The code is as follows:

term 1

definition 1-a

definition 1-b

definition 1-c

definition 1-d

definition 2-b ;definition 2-c

term 3

definition 3-a

definition 3-b

Copy code The code is as follows:$("#term-2").nextUntil("dt").css("background-color", "red");

The results are as follows:

Note:

1. Do not include yourself. That is, the above example does not include #term-2 itself

2. Exclude elements matched by parameter 1. That is, remove the head and tail.

3. If the selector does not match or no selector is specified, all following compatriots will be selected; for example:

I changed the above selector from the original dt to dts, and the results are as follows:

$("#term-2").nextUntil("dts").css("background-color", "red");

Copy code The code is as follows:$("#term-1").nextUntil( "#term-3", "dd").css("color", "blue");

//Or use DOM elements:

//var term3 = document.getElementById("term-3" );
//$("#term-1").nextUntil(term3, "dd").css("color", "blue");

$("#term-1").nextUntil("#term-3", ".abc").css("color", "blue");

The results are as follows:

Let’s look at an example of a selector that does not provide filtering

The result is as shown below:

$("#term-1").nextUntil("#term-3").css("color", "blue");

The prevUntil() method is similar to the nextUntil() method, the difference is that one goes up and the other goes down.