fonction jQuery add() et le contexte des objets jQuery

Question

Étant donné l'exemple HTML suivant ...

<div id='div1'>div one</div> 
<div id='div2'>div two</div> 

... Je trouve que le code jQuery suivant ...

$('#div1').click(function() { 

    var $d = $(this); // Using 'this' instead of '#div1' 

    $d.add('#div2').remove(); 
}); 

. ..would pas ajouter #div2 à l'ensemble référencé par $d, mais ce code ...

$('#div1').click(function() { 

    var $d = $('#div1'); // Using '#div1' instead of 'this' 

    $d.add('#div2').remove(); 
}); 

.. .successfully ajouté #div2.

Sur Firebug conseil, je trouve que l'utilisation $(this) a donné l'objet jQuery un contexte de #div1, mais cela a donné $('#div1') l'objet un contexte de document.

Compte tenu de cette information, j'ai essayé ...

var $d = $(this, document); 

... et la fonction add() a fonctionné comme prévu.

Alors, voici la question. Est-ce que quelqu'un pourrait m'expliquer pourquoi un contexte différent est attribué lors de l'utilisation de vs $('#div1')?

Answer 1

Sous la direction de mieux répondre à votre question:
First, look at the relevant code here, voici comment gère jQuery l'appel $(). Lorsque vous passez un élément DOM (qui est this, c'est le div lui-même) le contexte est l'élément DOM lui-même, cela permet de mieux gérer les fragments de document, etc. Lorsque vous passez une chaîne, le contexte par défaut est document (parce qu'il est l'ancêtre supérieur à rechercher). Rappelez-vous qu'un $(selector, context) appelle réellement context.find(selector) sous les couvertures, il est donc logique de commencer au document si rien n'est spécifié.

Note: vous pouvez toujours vérifier le contexte, il est une propriété disponible, comme celui-ci: $(this).context

Pour le comportement .add():
.add() utilise le même contexte pour sélectionner comme l'élément jQuery vous ajoutez à, alors ce que vous voyez est le comportement attendu. Pour une meilleure description, see how .add() is written:

add: function(selector, context) { 
    var set = typeof selector === "string" ? 
       jQuery(selector, context || this.context) : 
       jQuery.makeArray(selector), 
       all = jQuery.merge(this.get(), set); 

    return this.pushStack(isDisconnected(set[0]) || isDisconnected(all[0]) ? 
      all : 
      jQuery.unique(all)); 
    } 

Notez comment il utilise le contexte actuel si aucune n'est. Pour remplacer ce bien, il accepte un contexte, auquel vous pouvez passer document et obtenir le résultat que vous voulez, comme ceci:

$('#div1').click(function() { 
    $(this).add('#div2', document).remove(); 
});