Метод jQuery.add, похоже, не работает?

Интересно, может ли кто-нибудь объяснить это:

$(document).ready(function() {
        var popup = $('<div id="popup"><div class="popup-content"></div></div>');
        var popupContent = popup.children('div');
        var overlay = $('<div id="overlay"></div>');

        console.log(popup);
        console.log(popupContent);
        console.log(overlay);
        console.log(overlay.add(popup).appendTo('body'));
    });

Я добавил некоторые отладки там, если вы хотите проверить его.

Я не понимаю, почему добавляется только оверлей, когда appendTo() вызывается в объекте jQuery, содержащем два элемента?

Любая помощь будет высоко оценена.

Ответ 1

.add() не изменяет существующий объект, он возвращает новый объект со значениями в нем. Таким образом, вы не добавляете объект, который, по вашему мнению, вам нужен.

Эта часть кода НЕ изменяет объект overlay: overlay.add(popup) Скорее, он создает новый объект, но поскольку ссылка на этот новый объект отсутствует, он сразу же теряется - там вы не можете использовать его. Сам объект оверлея не изменяется.

Вместо этого вы должны сделать что-то вроде этого:

overlay = overlay.add(popup);
overlay.appendTo('body');

Ответ 2

Я предполагаю, что это имеет какое-то отношение к оверлейному объекту jQuery, который еще не был добавлен в DOM. В jquery doc на .add говорится:

"Учитывая объект jQuery, который представляет набор элементов DOM,.add() метод создает новый объект jQuery от объединения этих элементов и те, которые прошли в метод." - http://api.jquery.com/add/

Наложение не является набором элементов DOM. Вы можете просто использовать append?:

overlay.append(popup).appendTo('body')

Ответ 3

Но я только что обнаружил, что удаление id из оверлея устраняет проблему:

$(document).ready(function() {
        var popup = $('<div id="popup"><div class="popup-content"></div></div>');
        var popupContent = popup.children('div');
        var overlay = $('<div></div>');

        console.log(popup);
        console.log(popupContent);
        console.log(overlay);
        console.log(overlay.add(popup).appendTo('body'));
    });

Я не думаю, что это должно быть релевантно, находятся ли узлы в DOM или еще нет, поскольку .add() просто объединяет два объекта jQuery.

Это не имеет смысла...