jQuery的JavaScript意外对象行为

我有两个

元素和以下JavaScript代码：

var myObject = {
    $input: $('<input />'),
    insert: function () {
        $('div').append(this.$input);
        $('div').append(' ');
    }
};

myObject.insert();

var myObject={
$input:$（''），
插入：函数（）{
$（'div'）.append（this.$input）；
$（'div'）。追加（“”）；
}
};
myObject.insert（）；

正如我所料，这将在两个

元素中的每一个元素中生成一个

元素

现在，当我创建

myObject

的新实例并再次调用

insert（）

时，我将需要4个

元素，每个

中有两个。奇怪的是，我只得到3个

元素

请参见此处的示例代码： 试试：

var myObject={
插入：函数（）{
$（'div'）。每个（函数（索引）{
添加（$（''）；
$（此）。附加（“”）；
});
}
};
myObject.insert（）；
myObject.insert（）；

一旦将一个元素插入到DOM中，另一个

.append（）

调用它，因为附加的内容会导致它在DOM中移动（）。您的代码创建了一个jQuery集合，其中包含一个输入，该输入尚未附加到DOM中。因此，对

insert（）

的第一次调用会将其追加到每个文件中（使用jQ内部的克隆或复制机制）

但是，在第二次调用中，

this.$input

引用了DOM中已经存在的内容（由于第一次调用）。在内部，jQuery是

每一个

——对div的集合进行加密，并追加

此中的输入。$input

。因此，它添加它，移动它

主要的问题是，您正在一次又一次地追加相同的输入。请记住，JavaScript通常引用现有对象，而不是创建新对象。同一个输入元素不断被重新引用

如果希望方法向每个DIV添加输入，只需将输入标记传递到append：

$( 'div' ).append( '<input />' );

$（'div'）。追加（“”）；

您正在显式创建一个输入：

$input: $('<input />',{value:i}),

然后

Object.create

不会创建新的

$input

，因此在第二个过程中，它会将第二个

div

（实际上是原始的）的输入附加（移动）到第一个

div

，然后执行隐式克隆以填充第二个

div

每当调用
insert（）
时，递增一个
i
变量，并将其添加为输入值。请注意，它始终设置为
0

我还修改了它，将一个字符串传递给
insert
，以便您可以看到每个输入来自哪个调用

来自第二个调用的两个输入仍然将字符串传递给第一个调用


编辑：

我在解释的中间翻了一下，但概念是一样的

调用第二个
insert（）
时，首先为原始文件创建克隆并将其添加到第一个
div
，然后将原始文件附加到第二个
div
（已存在的位置）

jQuery首先生成克隆，然后追加原始的最后一个

这将在原始属性中添加自定义属性，然后在每个
insert（）
之后在具有该自定义属性的元素旁边添加一些文本。文本总是添加到第二个
div
中原始文本的旁边。wierd行为是由于您使用了一个JQuery集合，而您不应该使用它。它一开始是如何工作的，这超出了我的能力范围

var myObject = {
input: '<input />',
insert: function () {
    $('div').append(this.input);
    //$('div').append(' ');
}
};

var myObject={
输入：“”，
插入：函数（）{
$（'div'）.append（this.input）；
//$（'div'）。追加（“”）；
}
};
这就是正在发生的事情。从jQuery文档中：

如果以这种方式选择的元素被插入其他位置，它将被移动到目标中（而不是克隆）

但是，如果有多个目标元素，则将在第一个元素之后为每个目标创建插入元素的克隆副本

因此，第一次，由于您的输入不在DOM中的任何位置，它被克隆并插入到两个div中。但是，第二次调用它时，它将从第二个div中删除，然后被克隆并添加回两个div中

在代码末尾，第一个div包含两个输入，但第二个div只包含最近的输入，因为每个输入都已从上一个div中删除

我的myObject.insert（）的两行偶数；仍然只创建了3个输入，很有趣。第一个调用是我认为奇怪的。您正试图在两个位置附加
$（“”）
的单个实例。第二个append应该移动它，而不是克隆它（我相信它在第二个调用中就是这么做的）。出于某种原因，第一个电话是克隆它（或者看起来是这样）。哼。那么，当
insert（）
只被调用一次时，为什么我们会得到2个
框呢？因为最初的调用引用的是一个不在DOM中的元素，据我所知，它被复制到了每个框中。我不明白为什么同一个输入元素总是被重新引用。不是每个jQuery调用都会创建一个新对象吗？是的，eac调用会使用新输入创建一个新集合。但是你只调用它一次…+1，因为我试图描述的同一个问题有不同的解释。为什么不
Object.create
创建一个新的
$input
？不是每个jQuery调用
$（'）
都应该创建一个新对象吗？@Randomblue:是的，每个jQuery
$（'）
调用都会创建一个新对象，但是当您将原始对象传递给
对象时。create（）
它只是通过将原始对象的属性值复制到新对象上的相同属性中来创建一个重复的对象。
myObject.$input
的值是对所创建jQuery的引用。因此，
Object.create（）
只是将对原始jQuery对象的引用复制到新的jQuery对象中。因此，结果对象的
$input
属性引用的是原始jQuery对象。我会做一个简短的考试
// 2 divs
$('div').append(this.$input);

var myObject = {
input: '<input />',
insert: function () {
    $('div').append(this.input);
    //$('div').append(' ');
}
};