JQuery добавить() функция и контекст JQuery объектов

Question

Учитывая следующий пример HTML ...

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

... Я обнаружил, что следующий код JQuery ...

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

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

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

. не ..would добавить #div2 к набору, на который ссылается $d, но этот код ...

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

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

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

.. . успешно добавлено #div2.

посоветовавшись поджигатель, я обнаружил, что с помощью $(this) дал JQuery объект контекст #div1, но делать $('#div1') дал объект контекст document.

С учетом этой информации я пытался ...

var $d = $(this, document); 

... и add() функция работала, как ожидалось.

Итак, вот вопрос. Может кто-нибудь объяснить мне, почему другой контекст присваивается при использовании $(this) против $('#div1')?

Answer 1

Отредактированный лучше Ваш вопрос:
First, look at the relevant code here, это как JQuery обрабатывает $() вызов. Когда вы передаете элемент DOM (который является this, это сам div), контекст является самим элементом DOM, это лучше позволяет обрабатывать фрагменты документа и т. Д. Когда вы передаете строку, контекст по умолчанию - document (потому что это верхний предок для поиска). Помните, что $(selector, context) действительно вызывает context.find(selector) под обложками, поэтому имеет смысл начать работу с документом, если ничего не указано.

Примечание: вы всегда можете проверить контекст, это доступное свойство, например: $(this).context

Для .add() поведения:
.add() использует тот же контекст для выбора в качестве элемента JQuery вы добавляете к, так что вы видите, это ожидаемое поведение. Для лучшего описания, 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)); 
    } 

Обратите внимание, как она использует текущий контекст, если не будет принят ни один. Чтобы изменить это, хотя, он принимает контекст, к которому вы можете пройти document и получить результат, который вы хотите, как это:

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