Utilisation correcte de la fonction jQuery.add()

La fonction

add() est utilisée pour ajouter des éléments qui correspondent à l'expression spécifiée à l'élément correspondant actuel et renvoie

sous la forme d'un objet jQuery. Les expressions ici incluent. : sélecteur ( String), contenu HTML (String), élément DOM (Element), objet jQuery.

L'opposé de cette fonction est la fonction not(), qui est utilisée pour supprimer les éléments qui correspondent à l'expression spécifiée de l'élément correspondant actuel.

Cette fonction appartient à l'objet (instance) jQuery.

Syntaxe

jQueryObject.add( expr [, context ] )

Paramètres

Description du paramètre

expr String/Element/jQuery Expression spécifiée par type.

context optionnel/Element/jQuery type spécifie le nœud de document qui représente la plage de recherche. Ce paramètre n'est disponible que lorsque le paramètre expr représente la chaîne de sélection.

Si le paramètre expr est une chaîne, il représente le sélecteur jQuery ou le contenu de la balise HTML , et jQuery fera automatiquement le jugement correspondant.

Nouveau support de jQuery 1.3.2 : le paramètre expr peut être un objet jQuery.

Nouveau support de jQuery 1.4 : nouveau paramètre de contexte. Lorsque le paramètre expr représente un sélecteur, le paramètre contexte est utilisé pour spécifier la plage de recherche du sélecteur.

Valeur de retour

add()La valeur de retour de la fonction est de type jQuery, renvoyant un nouvel objet jQuery qui encapsule l'objet jQuery actuel et l'expression spécifiée. La somme des éléments correspondants.

S'il n'y a aucun élément correspondant, renvoie un objet jQuery vide.

La fonction add() ne modifie pas la correspondance des éléments de l'objet jQuery actuel. Le résultat de l'ajout n'est reflété que dans le nouvel objet jQuery en tant que valeur de retour.

Exemple & Description

La fonction add() et le sélecteur d'union ont le code équivalent suivant :

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

Prenons le code HTML suivant comme exemple :

<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>

L'exemple de code jQuery suivant est utilisé pour démontrer l'utilisation spécifique de la fonction add() :

//返回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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!