Detailed explanation of jQuery.siblings() function usage

The

siblings() function is used to select all sibling elements (excluding itself) of each matching element and return it in the form of a jQuery object.

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

This function belongs to the jQuery object (instance).

Syntax

jQueryObject.siblings( [ selector ] )

Parameters

Parameters                                     Description

selector Optional/StringSpecified selector of type String.

siblings() The function will filter elements that match the specified selector among all sibling elements of each matching element in the current jQuery object.

If the Selector parameter is omitted, select all the peers of each matching element for each matching element.

Return value

siblings()The return value of the function is jQuery type and returns a new jQuery object, which encapsulates the information of each matching element of the current jQuery object. All sibling elements matching the specified selector.

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

Example & Description

Take the following HTML code as an example:

<p id="n1">
    <span id="n2">
        <span id="n3">A</span>
    </span>
    <label id="n4">B</label>
    <span id="n5">
        <span id="n6">C</span>
    </span>
    <strong id="n7" class="active">D</strong>
    <span id="n8" class="active">E</span>
</p>
<p id="n9">
    <span id="n10"></span>
    <label id="n11"></label>
    <span id="n12" class="active"></span>
</p>

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

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如：#id
function getTagsInfo($doms){
    return $doms.map(function(){
        return "#" + this.id;
    }).get();
}
var $n4 = $("#n4");
//匹配n4的所有同辈元素(同辈元素不会包括n4自己，下同)
var $elements = $n4.siblings( );
document.writeln( getTagsInfo( $elements ) ); // #n2,#n5,#n7,#n8
//匹配n4所有的同辈span元素
var $matches = $n4.siblings("span");
document.writeln( getTagsInfo( $matches ) ); // #n2,#n5,#n8
var $label = $("label");
//匹配所有label元素的含有类名"active"的同辈元素
var $actives = $label.siblings(".active");
document.writeln( getTagsInfo( $actives ) ); // #n7,#n8,#n12

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