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()不修改现有对象，它返回带有值的 new 对象。因此，您不会追加您认为自己的对象。

这部分代码 NOT 修改覆盖对象：overlay.add(popup)而是创建一个新对象，但由于没有对该新对象的引用，它立即丢失 - - 你无法使用它。叠加层对象本身没有变化。

你应该做这样的事情：

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

Answer 2

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

“给定一个代表的jQuery对象一组DOM元素，.add（） method构造一个新的jQuery对象从这些元素的结合和传入方法的那些。“ - http://api.jquery.com/add/

您的叠加层还不是一组DOM元素。你可以使用追加吗？：

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

Answer 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对象。

这没有任何意义......

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

3 个答案: