Question

这是一个JavaScript / Ajax网页（也使用jQuery）。

我有一个我需要显示的嵌套结构。显示顶级元素后，用户可以单击它，并查看其下方的级别（动态生成）。

我不想预先生成所有内容并使用display：none（页面很复杂，我正在简化此问题）隐藏它 - 我想从使用ajax获取的javascript数组构建显示

我的问题：

我有两个选择：

1：创建一个平面阵列：

[ {id: xx, children: [ xx, xx, .. ] }, ....]

然后，对于元素的onclick，我从数组中获取id，找到子节点，将它们从数组中拉出并显示它们。（我想我必须搜索数组，因为javascript中没有关联数组 - 或者做一个索引。）

2：创建一个嵌套数组：

{ id: xx, children [ { id: xx, children : [....] }, {....} ] }

然后以某种方式将数组中的子节点绑定到元素上。

我对第二种方法有两个问题：

答：在我创建它时，我会不断地为每个孩子复制大块的数组。（至少我认为我是。我需要使用深拷贝吗？我可以参考吗？）

B：我不确定如何将数据绑定到子元素。通常我使用带有onClicks的html字符串构建显示，然后追加整个事物。但onClicks只能获取ID，而不是数组的副本。

Answer 1

我更愿意使用第二种方法，因为它具有更好的结构，并且您可以在递归发挥作用时编写更少的代码。

你说你不确定如何将子元素绑定到数组而不实际创建dom元素，如果你对html使用<!DOCTYPE html>元素可以有html-*属性允许你存储数据在一个元素中，例如：

<ul id="lists">
    <li class="parent" id="root_22" data-children="{some object}">A Root Elelment</li>
</ul>

这种方法的问题在于你必须在子元素中存储子节点的每个子节点，这很可能是一个开销。

另一种方法是使用jQuery.data方法绑定数据，这将使DOM保持干净，但会将数据注入元素。

存储与指定元素关联的任意数据。

Answer 2

我最近做了类似的事情，我有一个非常大的嵌套结构（超过2000个节点） - 我不想批量附加到DOM。

我最终做的是获取ajax加载的数据并将其转换为嵌套结构......

<node id="1" title="a">
  <node id="2" title="b />
  <node id="3" title="b">
      <node id="4" title="d" />
  </node>
</node> etc...

...并将其存储为jQuery对象（节点），但从不将其附加到DOM。

然后我可以选择节点的直接子节点，因为我需要它们相对容易，转换为html元素并附加到DOM，添加数据等...

$("#"+ID+">node", nodes).each(function() { 
    var node = $(this);
    //do whatever... 
});

我不知道这是否是最节省内存的方法，但它确实很容易选择并根据需要将节点的直接子节点附加到DOM。