Detailed explanation of jQuery.prevUntil() function instance usage

The

prevUntil() function is used to select all sibling elements before each matching element until an element that matches the specified expression is encountered, and is returned in the form of a jQuery object.

The expression here refers to: selector (String), DOM element (Element), jQuery object.

You can also use selectors to further narrow the selection range and filter out elements that match the specified selector.

The opposite of this function is the nextUntil() function, which is used to select all sibling elements after each matching element until an element that matches the specified expression is encountered.

This function belongs to the jQuery object (instance).

Syntax

jQuery 1.4 Added this function.

jQueryObject.prevUntil( [ untilExpr [, filter ] ] )

Parameters

Parameter Description

untilExpr Optional/String/Element/jQuery type specification An expression, if an element matching the expression is encountered during the current matching process, the current matching will be stopped.

filter Selector string specified by optional/String type, used to filter matching elements.

The prevUntil() function will select all sibling elements before each matching element of the current jQuery object until it encounters an element that matches the specified expression untilExpr (excluding this element). In addition, we can also specify the filter parameter to further narrow the filtering scope and select elements that match the filter selector.

If the untilExpr parameter is omitted, all previous sibling elements will be selected.

jQuery 1.6 New support: parameter untilExpr can be a DOM element (Element) or a jQuery object.

Return value

prevUntil()The return value of the function is jQuery type, returning a new jQuery object that encapsulates the current jQuery object before each matching element All sibling elements that match the selector filter (if specified) until an element matching the specified expression untilExpr is encountered.

If there is no element that meets the criteria, an empty jQuery object is returned.

Example & Description

The prevUntil() function and the prevAll() function have the following equivalent codes:

// 这里的selector表示任意的选择器
// 两者均不带任何参数
$("selector").prevUntil( );
// 等价于
$("selector").prevAll( );

Take the following HTML code as an example:

<p id="n1">
    <span id="n2" class="foo"></span>
    <label id="n3"></label>
    <span id="n4"></span>
    <span id="n5" class="foo"></span>
</p>
<p id="n6">
    <strong id="n7" class="active"></strong>
    <span id="n8"></span>
    <span id="n9" class="foo"></span>
    <label id="n10"></label>
</p>

The following jQuery sample code is used to demonstrate the specific usage of the prevUntil() function:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如：tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
    return $doms.map(function(){
        return this.tagName + (this.id ? "#" + this.id : "");
    }).get();
}
var $n5 = $("#n5");
//匹配n5之前的所有同辈元素，直到遇到包含类名"foo"的元素为止
var $elements = $n5.prevUntil(".foo");
document.writeln( getTagsInfo( $elements ) ); // SPAN#n4,LABEL#n3
//匹配n5之前的所有同辈元素，直到遇到label元素为止
var $matches = $n5.prevUntil("label");
document.writeln( getTagsInfo( $matches ) ); // SPAN#n4
var $label = $("label");
//匹配n5之前包含类名"foo"的所有同辈span元素，直到遇到包含类名"active"的元素为止
var $span_foo = $label.prevUntil(".active", "span.foo");
document.writeln( getTagsInfo( $span_foo ) ); // SPAN#n9,SPAN#n2
var $n9 = $("#n9");
//不带任何参数的prevUntil()函数等价于不带任何参数的prevAll()函数
var $result = $n9.prevUntil( );
document.writeln( getTagsInfo( $result ) ); // SPAN#n8,STRONG#n7

The above is the detailed content of Detailed explanation of jQuery.prevUntil() function instance usage. For more information, please follow other related articles on the PHP Chinese website!