jQuery add() la función y el contexto de jQuery objetos

Question

Dado el siguiente ejemplo HTML ...

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

... me encontré con que el siguiente código de jQuery ...

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

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

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

. no ..would añadir #div2 al conjunto referenciado por $d, pero este código ...

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

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

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

.. .successfully added #div2.

Al firebug consultoría, he encontrado que el uso de $(this) dio el objeto jQuery un contexto de #div1, pero haciendo $('#div1') dio el objeto de un contexto de document.

Dada esta información Probé ...

var $d = $(this, document); 

... y el add() función funcionó como se esperaba.

Así que aquí está la pregunta. ¿Podría alguien explicarme por qué se asigna un contexto diferente al usar $(this) frente a $('#div1')?

Answer 1

Editado para responder mejor a su pregunta:
First, look at the relevant code here, así es como jQuery gestiona la llamada $(). Cuando pasas un elemento DOM (que es this, es el div mismo) el contexto es el elemento DOM en sí, esto permite manejar mejor fragmentos de documentos, etc. Cuando pasas una cadena, el contexto predeterminado es document (porque es el ancestro superior para buscar). Recuerde que $(selector, context) está realmente llamando al context.find(selector) bajo las sábanas, por lo que tiene sentido comenzar en el documento si no se especifica nada.

Nota: siempre se puede comprobar el contexto, es una propiedad disponible, así: $(this).context

Para el comportamiento .add():
.add() utiliza el mismo contexto para la selección como el elemento jQuery va a añadir a, entonces lo que estás viendo es el comportamiento esperado. Para una mejor descripción, 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)); 
    } 

Nota cómo se utiliza el contexto actual, si no se pasa ninguno. Para anular esto, sin embargo, se acepta un contexto, a la que se puede pasar document y obtener el resultado deseado, así:

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