Question

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

X：0＆amp; Y：0 = div：eq（0），X：0 Y：1 = div：eq（1），X：0 Y：2 = div：eq（2），X：0 Y：3 = div：eq（ 3），X：1 Y：0 = div：eq（4）等。

这样做桌子的最佳方法是什么？像这样创建一个OBJECT：

{ 00：0， 01：1， 02：2，等等.. }

或创建数组是否更好？

位置[0] [0] = 0

事情是我需要以多种方式使用表格...例如用户点击了div nb：13这个div的坐标是什么，或者div x的eq是什么：12 y：5。 / p>

这就是我现在的表现：

        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。但我无法弄清楚如何在技术上做到这一点。

你如何解决这个问题的宽度JS / jQuery？

Answer 1

几个问题：

网格是保持相同的大小还是会增长/缩小？
div会保持在同一位置还是会四处移动？
div会重复使用还是动态添加/删除？

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

var gridwidth = 20, gridheight = 10,
    cells = [], // coordinates -> div
    pos = {}, // div -> coordinates
    id, i, j; // temp variables

for (i = 0; i < gridwidth; i++) {
    cells[i] = [];

    for (j = 0; j < gridheight; j++) {
        id = 'x' + i + 'y' + j;
        cells[i][j] = $('#' + id);
        pos[id] = { x: i, y: j };
    }
}

给定一组坐标（x，y），你可以得到相应的div：

cells[x][y] // jQuery object of the div at (x, y)

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

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

Answer 2

除非你有非常严格的性能要求，否则只使用“row”和“col”属性就可以正常工作（尽管通过.data（）设置它们会更快）。要找到具有正确行/列的div，只需执行c.find("div[row=5][col=12]")。你真的不需要查找。

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

Answer 3

现在我知道它的用途......

起初看起来效率可能不高，但我认为最好这样做：

生成div一次（服务器端），给它们这样的id：id="X_Y"（X和Y显然是数字），用CSS给它们的位置，永远不要移动它们。（与例如背景变化相比，改变位置需要花费大量时间，并且你必须重新制作我在下面描述的数组）

在dom ready上创建一个2D数组并存储jquery objests指向那里的div gridfields[0][12]是一个jQuery对象，如$('#0_12')。你制作一次数组，不再使用选择器，所以它很快。此外 - 选择容器中的所有div并对它们执行.each()并将它们放到正确的数组字段中，分割它们的id属性。

移动元素您只需交换他们的css属性（或者如果可以，则更新类） - 或者如果您拥有包含信息的数据，则只需设置它们。

另一个超级快的东西（曾经在我的项目中实践过）是你只需将click事件绑定到主容器并通过拆分$(e.target).attr('id')来检查坐标

如果您将点击绑定到网格100x100 - 浏览器可能会死亡。在那里，做到了;）

它可能不直观（不改变div的位置，但交换内容等），但根据我的经验，它是最快的。（大多数东西都是在dom上完成的）

希望你使用它;）祝你好运。

Answer 4

我不是100％确定我理解你想要什么，但如果你担心性能，我建议你不要使用像jQuery这样的库。虽然jQuery最近变得更快，但它仍然比“纯粹的”JS / DOM操作有更多的开销。

其次 - 根据您想要支持的浏览器 - 考虑使用画布或SVG脚本甚至可能更好。

我如何制作分配表？

4 个答案: