Функция jQuery add () и контекст объектов 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();
});

... не добавит #div2 к набору, указанному $d, но этот код ...

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

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

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

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

После консультации с firebug я обнаружил, что использование $(this) дает объекту jQuery контекст #div1, но выполнение $('#div1') дает объекту контекст document.

Учитывая эту информацию, я пытался ...

var $d = $(this, document);

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

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

назначается другой контекст

Answer 1

Отредактировано, чтобы лучше ответить на ваш вопрос:
Сначала посмотрите на соответствующий код здесь , вот как jQuery обрабатывает вызов $(). Когда вы передаете элемент DOM (который является this, это сам div), контекст является самим элементом DOM, это лучше позволяет обрабатывать фрагменты документа и т. Д. Когда вы передаете строку, контекст по умолчанию равен document (потому что это главный предок для поиска). Помните, что $(selector, context) на самом деле вызывает context.find(selector) под прикрытием, поэтому имеет смысл начать с документа, если ничего не указано.

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

Для поведения .add():
.add() использует тот же контекст для выбора, что и добавляемый вами элемент jQuery, так что вы видите ожидаемое поведение. Для лучшего описания посмотрите, как написано .add() :

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();
});