Correct usage of jQuery.add() function

The

add() function is used to add elements that match the specified expression to the current matching element, and returns it in the form of a jQuery object.

The expressions here include: selector ( String), HTML content (String), DOM element (Element), jQuery object.

The opposite of this function is the not() function, which is used to remove elements that match the specified expression from the current matching elements.

This function belongs to the jQuery object (instance).

Syntax

jQueryObject.add( expr [, context ] )

Parameters

Parameter Description

expr String/Element/jQuery Type-specified expression.

context Optional/Element/jQuery type specifies the document node that represents the search range. This parameter is only available when the expr parameter represents the selector string.

If the expr parameter is a string, it represents the jQuery selector or HTML tag content, and jQuery will automatically make the corresponding judgment.

jQuery 1.3.2 New support: parameter expr can be a jQuery object.

jQuery 1.4 New support: Added context parameter. When the expr parameter represents a selector, the context parameter is used to specify the search range of the selector.

Return value

add()The return value of the function is jQuery type and returns a new jQuery object, which encapsulates the current jQuery object and the specified expression. The sum of matching elements.

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

The add() function does not change the element matching of the current jQuery object. The addition result is only reflected in the new jQuery object as the return value.

Example & Description

The add() function and the union selector have the following equivalent code:

// 这里的s1、s2均表示任意的选择器
$("s1").add("s2");
// 等价于
$("s1,s2");

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 add() function:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如：#id
function getTagsInfo($doms){
    return $doms.map(function(){
        return "#" + this.id;
    }).get();
}
//匹配所有的p元素，再加上所有的label元素
var $elements1 = $("p").add("label");
document.writeln( getTagsInfo( $elements1 ) ); // #n1,#n4,#n9,#n11
var $matches = $("span.active").add( document.getElementsByTagName("label")  );
document.writeln( getTagsInfo( $matches ) ); // #n4,#n8,#n11,#n12
var $elements2 = $("label").add( $("strong") );
document.writeln( getTagsInfo( $elements2 ) ); // #n4,#n7,#n11
var $elements3 = $("span.active").add( "label", $("#n9") );
document.writeln( getTagsInfo( $elements3 ) ); // #n8,#n11,#n12
var $elements4 = $("p").add(".active").add("span:only-child");
document.writeln( getTagsInfo( $elements4 ) ); // #n1,#n3,#n6,#n7,#n8,#n9,#n12

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