jQuery add() la funzione e il contesto di jQuery oggetti

Question

Dato il seguente esempio HTML ...

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

... ho scoperto che il seguente codice jQuery ...

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

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

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

. non ..would aggiungi #div2 al set fa riferimento $d, ma questo codice ...

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

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

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

.. . aggiunto con successo #div2.

, previa consultazione con Firebug, ho trovato che utilizzando $(this) ha dato il jQuery oggetto un contesto di #div1, ma facendo $('#div1') ha dato l'oggetto un contesto di document.

Date queste informazioni ho provato ...

var $d = $(this, document); 

... e la funzione di add() ha funzionato come previsto.

Quindi, ecco la domanda. Qualcuno potrebbe spiegare al mio perché viene assegnato un contesto diverso quando si utilizza $(this) rispetto a $('#div1')?

Answer 1

cura per affrontare al meglio la tua domanda:
First, look at the relevant code here, questo è il modo in jQuery gestisce la chiamata $(). Quando si passa un elemento DOM (che è this, è il div stesso) il contesto è l'elemento DOM stesso, questo consente di gestire meglio frammenti di documenti, ecc. Quando si passa una stringa, il contesto predefinito è document (perché è il primo antenato da cui cercare). Ricorda che uno $(selector, context) sta effettivamente chiamando context.find(selector) sotto le copertine, quindi ha senso iniziare al documento se non è specificato nulla.

Nota: si può sempre controllare il contesto, si tratta di una proprietà a disposizione, in questo modo: $(this).context

per il comportamento .add():
.add() utilizza lo stesso contesto per la selezione come elemento jQuery si sta aggiungendo a, quindi quello che stai vedendo è il comportamento previsto. Per una descrizione migliore, 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 come si utilizza il contesto attuale, se nessuno è passato. Per ignorare questo, però, accetta un contesto, a cui è possibile passare document e ottenere il risultato desiderato, in questo modo:

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