jQuery .add方法看似不起作用？

Question

我想知道是否有人可以解释这个:

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

我已经在那里添加了一些调试,以防你想测试它.

我不明白为什么只有在包含两个元素的jQuery对象上调用appendTo()时才会附加叠加？

任何帮助将非常感激.

Answer 1

.add()不修改现有对象,它返回一个带有值的新对象.因此,您不会追加您认为自己的对象.

这个代码部分不会不修改覆盖对象:overlay.add(popup) 相反,它会创建一个新的对象,但由于存在对新对象的参考,它立刻失去-也没有办法,你可以使用它.叠加层对象本身没有变化.

你应该做这样的事情:

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

Answer 2

我的猜测是它与尚未添加到 DOM 的覆盖 jQuery 对象有关。.add 上的 jquery 文档说：

“给定一个代表一组 DOM 元素的 jQuery 对象，.add() 方法根据这些元素和传递给该方法的元素的联合构造一个新的 jQuery 对象。” - http://api.jquery.com/add/

您的覆盖层还不是一组 DOM 元素。你可以只使用附加吗？：

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