jQuery.andSelf() function usage analysis

The

andSelf() 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.

This function belongs to the jQuery object (instance).

Syntax

This function was added in jQuery 1.2, but has been marked as obsolete starting from 1.8. Starting with jQuery 1.8, use the addBack() function instead.

jQueryObject.andSelf( )

Return value

andSelf()The return value of the function is of jQuery type and returns A new jQuery object that contains all elements that match the current jQuery object and the jQuery object that created it.

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

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

Details: When a jQuery object is created, there is an internal attribute (prevObject) that will save the reference of the jQuery object that created it. When the andSelf() 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 andSelf() 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的特定方法创建，使用andSelf()将返回一个新的jQuery对象
// 该对象所匹配的元素是$p和$label两者的匹配元素之和
var $pAndLabel = $label.andSelf();
document.writeln( getTagsInfo( $pAndLabel ) ); // #n1,#n4,#n9,#n11
// 所有包含类名"active"的span元素和它们的上一个紧邻的同辈元素
var $elements =  $("span.active").prev().andSelf();
document.writeln( getTagsInfo( $elements ) ); // #n7,#n8,#n11,#n12
// andSelf()之前有3个jQuery对象：
// 第1个：$("p")
// 第2个：$("p").find("strong")
// 第3个：$("p").find("strong").siblings(".active")
// 调用andSelf()的是第3个对象，创建该对象的是第2个对象
// 因此andSelf()返回包含第3个对象和第2个对象的匹配元素之和的jQuery对象
var $matches = $("p").find("strong").siblings(".active").andSelf();
document.writeln( getTagsInfo( $matches ) ); // #n7,#n8

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