Question

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 be 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?

Answer 1

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