代码之家 › 专栏 › 技术社区 › meo

如何制作分配表?

jquery javascript

meo · 技术社区 · 14 年前

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

{ 00: 0, 01: 1, 等。。 }

还是创建一个数组更好?

问题是我需要以多种方式使用这个表。。例如,用户单击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++

    })

4 回复 | 直到 14 年前

Jeffery To 14 年前

有几个问题:

网格会保持相同的大小还是会增长/收缩?
跳水运动员会保持同样的姿势还是四处走动?

如果一切都是静态的(固定的网格大小,固定的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

Tin 14 年前

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

让我详细说明一下。 http://plugins.jquery.com/project/dataSelector .

naugtur 14 年前

一开始似乎效率不高,但我认为这样做最好:

id="X_Y"

在dom ready上,只需创建一个2D数组并存储jquery对象,将div指向那里,这样 gridfields[0][12] $('#0_12') . 你做了一次数组,再也不用选择器了,所以很快。此外,选择容器中的所有div并执行以下操作 .each() 并将它们放入适当的数组字段中,拆分它们的id属性。

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

另一件超快速的事情(不久前在我的项目中已经实践过)是您只需将click事件绑定到主容器,并通过拆分来检查坐标 $(e.target).attr('id')

如果你把点击绑定到一个100x100的网格上,浏览器可能会死掉。你去过那里吗;)

它可能不是直观的(不是改变div的位置,而是交换内容等等),但根据我的经验,它是最快的(大多数事情都是在dom ready上完成的)

希望您能使用它;)祝你好运。

RoToRa 14 年前

我不能100%确定我是否理解您想要什么,但是如果您关心性能,我建议您避免使用jQuery之类的库。虽然jQuery最近变得更快了,但它的开销仍然比“纯”JS/DOM操作要大。

其次,根据您希望支持哪些浏览器,考虑使用canvas或SVG脚本可能更好。