How do i make a allocation table?

I have build a grid of div's as playground for some visual experiments. In order to use that grid, i need to know the x and y coordinates of each div. That's why i want to create a table with the X and Y position of each div.

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) etc..

What is the best way to do a table like that? Creating a OBJECT like this:

{ 00: 0, 01: 1, 02: 2, etc.. }

or is it better to create a array?

position[0][0] = 0

the thing is i need to use the table in multiple way's.. for example the user clicked the div nb: 13 what are the coordinates of this div or what is the eq of the div x: 12 y: 5.

Thats how i do it right now:

        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++

    })

I think it would 开发者_如何学Gobe faster to build a table with the coordinates, instead of adding them as attr or data to the DOM. but i cant figure out how to do this technically.

How would you solve this problem width JS / jQuery?

---

A few questions:

• Will the grid stay the same size or will it grow / shrink?
• Will the divs stay in the same position or will they move around?
• Will the divs be reused or will they be dynamically added / removed?

If everything is static (fixed grid size, fixed div positions, no dynamic divs), I suggest building two indices to map divs to coordinates and coordinates to divs, something like (give each div an id according to its position, e.g. "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 };
    }
}

Given a set of coordinates (x, y) you can get the corresponding div with:

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

and given a div you can get its coordinates with:

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

---

Unless you have very stringent performance requirements, simply using the "row" and "col" attributes will work just fine (although setting them through .data() will be faster). To find the div with the right row/col, just do a c.find("div[row=5][col=12]"). You don't really need the lookup.

Let me elaborate on that a little bit. If you were to build a lookup table that would allow you to get the row/col for a given div node, you would have to specify that node somehow. Using direct node references is a very bad practice that usually leads to memory leaks, so you'd have to use a node Id or some attribute as a key. That is basically what jQuery.data() does - it uses a custom attribute on the DOM node as a key into its internal lookup table. No sense in copying that code really. If you go the jQuery.data() route, you can use one of the plugins that allows you to use that data as part of the selector query. One example I found is http://plugins.jquery.com/project/dataSelector.

---

Now that I know what it's for...

It might not seem efficient at first, but I think It would be the best to do something like this:

Generate the divs once (server side), give them ids like this: id="X_Y" (X and Y are obviously numbers), give them positions with CSS and never ever move them. (changing position takes a lot of time compared to eg. background change, and You would have to remake the array I describe below)

on dom ready just create a 2D array and store jquery objests pointing the divs there so that gridfields[0][12] is a jQuery object like $('#0_12'). You make the array once and never use selectors any more, so it's fast. Moreover - select all those divs in a container and do .each() on them and put them to proper array fields splitting their id attributes.

To move elements You just swap their css attributes (or classes if You can - it's faster) or simply set them if You have data that has the information.

Another superfast thing (had that put to practice in my project some time ago) is that You just bind click event to the main container and check coordinates by spliting $(e.target).attr('id')

If You bind click to a grid 100x100 - a browser will probably die. Been there, did that ;)

It may not be intuitive (not changing the div's position, but swapping contents etc.), but from my experience it's the fastest it can get. (most stuff is done on dom ready)

Hope You use it ;) Good luck.

---

I'm not 100% sure that I understand what you want, but I'd suggest to avoid using a library such as jQuery if you are concerned about performance. While jQuery has become faster recently, it still does has more overhead than "pure" JS/DOM operations.

Secondly - depending on which browsers you want to support - it may even be better to consider using a canvas or SVG scripting.