Javascript 如何制作分配表？

我已经建立了一个div的网格作为一些视觉实验的操场。为了使用网格，我需要知道每个div的x和y坐标。这就是为什么我要创建一个包含每个div的x和y位置的表

X:0&Y:0=div:eq（0），X:0y:1=div:eq（1），X:0y:2=div:eq（2），X:0y:3=div:eq（3），X:1y:0=div:eq（4）等

做那样的桌子最好的方法是什么？创建如下对象：

{ 00: 0, 01: 1, 02: 2, 等 }

还是创建一个数组更好

位置[0][0]=0

问题是我需要以多种方式使用该表。。例如，用户单击div nb:13该div的坐标是多少，或者div x:12 y:5的等式是多少

我现在就是这样做的：

        var row = 0
    var col = 0
    var eq = 0      

    c.find('div').each(function(i){ // c = $('div#stage')

        if (i !=0 && $(this).offset().top != $(this).prev().offset().top){
            row++
            col = 0
        }

        $(this).attr({'row': row, 'col': col })

        col++

    })

我认为用坐标构建一个表会更快，而不是将它们作为attr或数据添加到DOM中。但我不知道如何在技术上做到这一点

---

如何解决这个问题？

除非您有非常严格的性能要求，否则只需使用“row”和“col”属性就可以了（尽管通过.data（）设置它们会更快）。要找到具有正确行/列的div，只需执行一个

c.find（“div[row=5][col=12]”

。你并不真的需要查找

让我详细说明一下。

---

如果要构建一个允许获取给定div节点的行/列的查找表，则必须以某种方式指定该节点。使用直接节点引用是一种非常糟糕的做法，通常会导致内存泄漏，因此必须使用节点Id或某些属性作为密钥。这就是jQuery.data（）的基本功能——它使用DOM节点上的自定义属性作为其内部查找表的键。复制那些代码真的没有意义。如果使用jQuery.data（）路径，可以使用其中一个插件，该插件允许您将该数据用作选择器查询的一部分。我发现的一个例子是。

除非您有非常严格的性能要求，否则只需使用“row”和“col”属性就可以了（尽管通过.data（）设置它们会更快）。要找到具有正确行/列的div，只需执行一个

c.find（“div[row=5][col=12]”

。你并不真的需要查找

让我详细说明一下。 如果要构建一个允许获取给定div节点的行/列的查找表，则必须以某种方式指定该节点。使用直接节点引用是一种非常糟糕的做法，通常会导致内存泄漏，因此必须使用节点Id或某些属性作为密钥。这就是jQuery.data（）的基本功能——它使用DOM节点上的自定义属性作为其内部查找表的键。复制那些代码真的没有意义。如果使用jQuery.data（）路径，可以使用其中一个插件，该插件允许您将该数据用作选择器查询的一部分。我发现的一个例子是。

几个问题：

• 网格会保持不变还是会增长/收缩
• 两名跳水队员会保持在同一位置还是四处走动
• div将被重用还是将被动态添加/删除

如果一切都是静态的（固定网格大小，固定div位置，没有动态div），我建议建立两个索引，将div映射到坐标，并将坐标映射到div，类似于（根据每个div的位置为每个div指定一个id，例如“x0y0”，“x0y1”）：

给定一个div，你可以得到它的坐标：

pos[div.attr('id')] // an object with x and y properties

有几个问题：

• 网格会保持不变还是会增长/收缩
• 两名跳水队员会保持在同一位置还是四处走动
• div将被重用还是将被动态添加/删除

如果一切都是静态的（固定网格大小，固定div位置，没有动态div），我建议建立两个索引，将div映射到坐标，并将坐标映射到div，类似于（根据每个div的位置为每个div指定一个id，例如“x0y0”，“x0y1”）：

给定一个div，你可以得到它的坐标：

pos[div.attr('id')] // an object with x and y properties

---

现在我知道它的用途了

乍一看可能效率不高，但我认为最好是这样做：

生成一次div（服务器端），给它们这样的id:

id=“X_Y”

（X和Y显然是数字），给它们CSS位置，永远不要移动它们。（改变位置比改变背景要花很多时间，你必须重新制作我下面描述的阵列）

在dom就绪的情况下，只需创建一个2D数组，并存储指向div的jquery对象，以便

gridfields[0][12]

是一个类似于

$（'#0_12'）

的jQuery对象。您只创建了一次数组，不再使用选择器，因此速度很快。此外，选择容器中的所有这些div，并对它们执行

.each（）

，然后将它们放入适当的数组字段中，拆分它们的id属性

要移动元素，您只需交换它们的css属性（如果可以的话，也可以交换类，这样会更快），或者如果您有包含这些信息的数据，只需设置它们

另一个超快的事情（不久前在我的项目中已经付诸实践）是，您只需将click事件绑定到主容器，并通过拆分

$（e.target）.attr（'id'）

如果您将单击绑定到网格100x100-浏览器可能会死机。曾经去过那里，是吗；）

这可能不是直观的（不是改变div的位置，而是交换内容等），但根据我的经验，这是最快的。（大部分工作都是在dom就绪的环境下完成的）

---

希望您能使用它；）祝你好运。

现在我知道它的用途了

乍一看可能效率不高，但我认为最好是这样做：

生成一次div（服务器端），给它们这样的id:

id=“X_Y”

（X和Y显然是数字），给它们CSS位置，永远不要移动它们。（张）

pos[div.attr('id')] // an object with x and y properties