Detailed explanation of jQuery.addBack() function usage examples

The addBack() function is used to add the previously matched element to the currently matched element and return it in the form of a new jQuery object.

The current jQuery object may be created by calling a specific method of other jQuery objects. Using this function will return a new jQuery object that contains all matches between the current jQuery object and the jQuery object that created it previously. element.

You can also use selectors to further narrow the scope of addition, and only add elements that match the specified selector in the previous jQuery object.

This function belongs to the jQuery object (instance).

Syntax

jQuery 1.8 Added this function. The andSelf() function is an alias for this function (the andSelf() function is obsolete as of 1.8).

jQueryObject.addBack( [ selector ] )

Parameters

Parameters

Description

selector Optional/StringThe selector specified by type String.

If the selector parameter is omitted, all matching elements of the previous jQuery object will be added.

Return value

addBack()The return value of the function is jQuery type and returns a new jQuery object, which contains all matching elements of the current jQuery object and Creates the elements matching the specified selector among the matching elements of the jQuery object of the current jQuery object.

If there is no matching element, an empty jQuery object is returned.

Starting from jQuery 1.8, the andSelf() function is an alias of this function.

Details: When a jQuery object is created, there is an internal attribute (prevObject) that will save a reference to the jQuery object that created it. When the addBack() function is called, the current jQuery and the jQuery object that created it are connected through the add() function, and a new 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 addBack() function:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如：#id
function getTagsInfo($doms){
    return $doms.map(function(){
        return "#" + this.id;
    }).get();
}
//匹配所有的p元素
var $p = $("p");
//选取所有p元素的后代label元素
var $label = $p.find("label");
//由于jQuery对象$label是通过$p的特定方法创建，使用addBack()将返回一个新的jQuery对象
//该对象所匹配的元素是$p和$label两者的匹配元素之和
var $pAndLabel = $label.addBack();
document.writeln( getTagsInfo( $pAndLabel ) ); // #n1,#n4,#n9,#n11
// 所有包含类名"active"的元素的上一个紧邻的同辈元素(#)
// 再加上所有包含类名"active"的元素中的span元素
var $elements =  $(".active").prev().addBack("span");
document.writeln( getTagsInfo( $elements ) ); // #n5,#n7,#n8,#n11,#n12
//addBack()之前有3个jQuery对象：
//第1个：$("p")
//第2个：$("p").find("strong")
//第3个：$("p").find("strong").siblings(".active")
//调用addBack()的是第3个对象，创建该对象的是第2个对象
//因此addBack()返回包含第3个对象和第2个对象的匹配元素之和的jQuery对象
var $matches = $("p").find("strong").siblings(".active").addBack();
document.writeln( getTagsInfo( $matches ) ); // #n7,#n8

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