Функция jQuery add() и контекст объектов jQuery

Учитывая следующий пример 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')

Ответы

Ответ 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();
});