HTML5 数据、数组和 .push - 奇怪的冲突答案

【问题标题】：HTML5 data, arrays and .push - weird conflictHTML5 数据、数组和 .push - 奇怪的冲突
【发布时间】：2013-11-18 14:47:04
【问题描述】：

所以我试图弄清楚为什么当我将一个值推送到父对象时，子对象会使用它。

html:

<div id="parent" class="things" data-tallest="[]">
  <div id="child1" class="things" data-tallest="[]">
    I'm a child
  </div>
  <div id="child2" class="things" data-tallest="[]">
    I'm another child
  </div>
</div>

js:

somearray = ["child1", "child2"]
$(".things").data("tallest",[])
for (var i = 0; i < somearray.length; i++) {
  tocheck = somearray[i]
  newarray = $("#"+tocheck).parent().data("tallest")
  newarray.push(20);
  $(tocheck).parent().data("tallest",newarray)
}

console.log("Child 1 'tallest': "+$("#child1").data("tallest"));

看到这个小提琴（问题在控制台日志中注明）：

http://jsfiddle.net/cTY3H/3/

应该发生的是我遍历数组并将“20”两次推送到父对象$("#parent") 的数据最高数组。它应该导致[20,20]。相反，两个子对象都将值 [20,20] 推送到它们的数组中。子对象永远不应该得到任何分配给它们的东西。

编辑：澄清

有什么猜测吗？

【问题讨论】：

祝贺你，@thenewseattle，这是我在 Stack Overflow 上得到的最没有帮助和最具判断力的答案。澄清几点： 1 - 这不是家庭作业。当我使用 jQuery 的 .data() 方法分配值时，我看到了奇怪的行为。我找不到任何来自 jQuery 或其他地方的文档来解释为什么子对象会获得分配给其父对象的数据值。 2 - 我提供了一个清晰干净地重现错误的 jsfiddle。 javascript 在任何时候都不是分配给 #child1 的值，但无论如何它都会得到一个值。
因为在实际情况下，数据是从 Rails 后端加载并由许多不同的脚本读写的。它可以由许多不同的来源（包括 Faye）更新，因此它充当一个变量存储，附加到 DOM 中的特定对象，这些对象经常被创建和销毁。使用 HTML5 data-* 属性进行初始变量加载然后更新它们似乎是正确的方法。
这里不相关。除非您能解释为什么使用 jQuery 的 .parent().data() 方法不仅为父对象而且为所有子对象分配值，否则我认为您无能为力。我会找到另一种方法来做到这一点。

标签： javascript jquery arrays html

【解决方案1】：

你的数组只有一项，改变：

somearray = ["child1, child2"]

到：

var somearray = ["child1", "child2"];

【讨论】：

是的，在我的例子中是错字。可悲的是，这并没有完全做到。问题是为什么子对象正在获取应该只被推送到父对象的数据值。

【解决方案2】：

原来问题出在上述 javascript 的第 1 行。根据@jfriend00 和@charlietfl，我尝试清除存储的值：

$(".things").data("tallest",[])

导致所有 .things 对象都获得 same 数组，因此对其中的任何更改都会改变它们。

查看更好的解释：jQuery data method pushes data to child objects

【讨论】：