javascript - 如何制作分配表？

Question

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

X:0 & 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) 等等.

制作这样的表格的最佳方法是什么？创建一个像这样的对象:

{ 00:0, 01:1， 02:2， ETC..}

还是创建一个数组更好？

位置[0][0] = 0

问题是我需要以多种方式使用表格..例如用户单击了 div nb: 13 这个 div 的坐标是什么或者 div x: 12 y: 5 的 eq 是什么。

这就是我现在的做法:

        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的位置给每个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