Javascript jQuery data（）可能会更改选择器中不存在的元素？

jQuery数据似乎可以将数据链接到多个元素。在下面的示例中，两个元素都获得了这两个属性，尽管它似乎只影响

#一个

元素

我假设这是jQuery中的预期行为，因为它正在更改对象

<div id="one" class="thing"></div>
<div id="two" class="thing"></div>
<div id="three" class="thing"></div>
<script>
jQuery(function($) {
    $('.thing').data('obj',{a:'a'});

    $('#one').data('obj',$.extend($('#one').data('obj'),{one:'one'}));

    //Display:
    for (i in $('#one').data('obj')) {
        alert(i+' in obj.');
    }
    for (i in $('#two').data('obj')) {
        alert(i+' in obj.');
    }
})
</script>

jQuery（函数（$）{
$（'.thing'）.data（'obj'，{a:'a'}）；
$（'one'）.data（'obj'，$.extend（$（'one'）.data（'obj'），{one:'one'））；
//显示：
对于（i，单位为美元（'one'）。数据（'obj'））{
警报（obj中的i+）；
}
对于（i，单位为$（'#2'）。数据（'obj'））{
警报（obj中的i+）；
}
})

JSFiddle：

---

我知道初始化.each（）函数来设置单独的数据可以解决这个问题，但这会被认为是javascript或jQuery中的错误吗？

这是使用相同对象的副作用，正如您所提到的。因此，与其说它是在更改与选择器不匹配的对象的数据，不如说它是在设置一个对象上的值，而您恰好将该对象设置为共享对象

---

如果不希望共享数据，则需要使用

。每个
循环单独设置数据。
这是使用相同对象的副作用，如您所述。因此，与其说它是在更改与选择器不匹配的对象的数据，不如说它是在设置一个对象上的值，而您恰好将该对象设置为共享对象

如果不想共享数据，则需要使用
。每个
循环单独设置数据。
这在任何方面都不是错误

如果您有以下情况，您的代码将执行完全相同的操作：

var a = {a:'a'}, b = a;
b.c = "derp";
alert(a.c); // derp

这是因为对象是通过引用传递的，而不是通过值传递的。要获取单个对象，您应该使用
。每个
循环，正如您所提到的。
这在任何方面都不是一个bug

如果您有以下情况，您的代码将执行完全相同的操作：

var a = {a:'a'}, b = a;
b.c = "derp";
alert(a.c); // derp

这是因为对象是通过引用传递的，而不是通过值传递的。要获取单个对象，您应该使用
。每个
循环，如您所述。
这实际上是使用
$的结果。扩展
，从：

请记住，目标对象（第一个参数）将被修改，并且也将从$.extend（）返回。但是，如果要保留这两个原始对象，可以通过传递空对象作为目标来实现：

var object=$.extend（{}，object1，object2）；

根据原始代码，唯一需要的更改是：

jQuery（函数（$）{
$（'.thing'）.data（'obj'，{a:'a'}）；
$（'one'）.data（'obj'，$.extend（{}，$（'one'）.data（'obj'），{one:'one'））；
//显示：
对于（i，单位为美元（'one'）。数据（'obj'））{
警报（obj中的i+）；
}
对于（i，单位为$（'#2'）。数据（'obj'））{
警报（obj中的i+）；
}
})

请参见此处的更改：

更详细的解释

对于以下代码块：

var a={}；
var b={}；
var c={}；
var debug=函数（）{
log（“a.obj:%s”，JSON.stringify（$（a.data（'obj'）））；
log（“b.obj:%s”，JSON.stringify（$（b.data（'obj'）））；
log（“c.obj:%s”，JSON.stringify（$（c.data（'obj'）））；
};
//a、b和c都有相同的obj
$（[a，b，c]）。数据（'obj'，{x:true}）；
console.log（“--test1--”）；
log（“a.obj=b.obj=c.obj={\'x\'：true}”）；
调试（）；
//扩展其中任何一个的obj将影响所有其他对象
$（a.data（'obj'，$.extend（$（a.data（'obj'），{y:true}））；
console.log（“--test2--”）；
log（$.extend（a.obj，{\'y\'：true}））；
调试（）；
//b.obj现在是与a和c不同的obj
$（b）.data（'obj'，$.extend（{}，$（b）.data（'obj'），{z:true}））；
console.log（“--test3--”）；
log（$.extend（{}，b.obj，{\'z\'：true}））；
调试（）；
//c.obj仍受a.obj变更的影响（b.obj不受影响）
$（a）.data（'obj'）.m=true
console.log（“--test4--”）；
console.log（“a.obj.m=true”）；
调试（）；
//c.obj现在不同于a.obj和b.obj
$（c）.data（'obj'，{r:true}）
console.log（“--test 5--”）；
log（“c.obj={\'r\'：true}”）；
调试（）；
//a.obj变更不影响b.obj或c.obj
$（a）.data（'obj'，$.extend（$（a）.data（'obj'），{s:true}））；
console.log（“--test 6-->”）；
log（$.extend（a.obj，{\'s\'：true}））；
调试（）；

结果如下：

-- test 1 --
a.obj = b.obj = c.obj = {"x":true}
  a.obj: {"x":true}
  b.obj: {"x":true}
  c.obj: {"x":true}
-- test 2 --
$.extend(a.obj, {"y":true})
  a.obj: {"x":true,"y":true}
  b.obj: {"x":true,"y":true}
  c.obj: {"x":true,"y":true}
-- test 3 --
$.extend({}, b.obj, {"z":true})
  a.obj: {"x":true,"y":true}
  b.obj: {"x":true,"y":true,"z":true}
  c.obj: {"x":true,"y":true}
-- test 4 --
a.obj.m = true
  a.obj: {"x":true,"y":true,"m":true}
  b.obj: {"x":true,"y":true,"z":true}
  c.obj: {"x":true,"y":true,"m":true}
-- test 5 --
c.obj = {"r":true}
  a.obj: {"x":true,"y":true,"m":true}
  b.obj: {"x":true,"y":true,"z":true}
  c.obj: {"r":true}
-- test 6 --
$.extend(a.obj, {"s":true})
  a.obj: {"x":true,"y":true,"m":true,"s":true}
  b.obj: {"x":true,"y":true,"z":true}
  c.obj: {"r":true}

这实际上是您使用
$的结果。从以下位置扩展
：

请记住，目标对象（第一个参数）将被修改，并且也将从$.extend（）返回。但是，如果要保留这两个原始对象，可以通过传递空对象作为目标来实现：

var object=$.extend（{}，object1，object2）；

根据原始代码，唯一需要的更改是：

jQuery（函数（$）{
$（'.thing'）.data（'obj'，{a:'a'}）；
$（'one'）.data（'obj'，$.extend（{}，$（'one'）.data（'obj'），{one:'one'））；
//显示：
对于（i，单位为美元（'one'）。数据（'obj'））{
警报（obj中的i+）；
}
对于（i，单位为$（'#2'）。数据（'obj'））{
警报（obj中的i+）；
}
})

请参见此处的更改：

更详细的解释

对于以下代码块：

var a={}；
var b={}；
var c={}；
var debug=函数（）{
log（“a.obj:%s”，JSON.stringify（$（a.data（'obj'）））；
log（“b.obj:%s”，JSON.stringify（$（b.data（'obj'）））；
log（“c.obj:%s”，JSON.stringify（$（c.data（'obj'）））；
};
//a、b和c都有相同的obj
$（[a，b，c]）。数据（'obj'，{x:true}）；
console.log（“--test1--”）；
log（“a.obj=b.obj=c.obj={\'x\'：true}”）；
调试（）；
//扩展其中任何一个的obj将影响所有其他对象
$（a.data（'obj'，$.extend（$（a.data（'obj'），{y:true}））；
console.log（“--test2--”）；
log（$.extend（a.obj，{\'y\'：true}））；
调试（）；
//b.obj现在是与a和c不同的obj
$（b）.data（'obj'，$.extend（{}，$（b）.data（'obj'），{z:t