Вычисление координат

[-O-J-A-]

Здравствуй Народ, всех с НГ, наступающим Рождеством.

Нужно сделать вот что:

Есть 512 дивов, нужно при mouseover выводить его координату X Y через innerhtml или load jquery.

К примеру: x=6 y=10 (то есть 6 рядок по горизонтали, 10 вертикаль (всего 16 рядов по X, по Y 32) )

В голову пришли пару решений, но они на мое мнение не кошерны...

К примеру такое:

$("#b1").mouseover(function(){$("#coords_xy").html("x(1); y(1);");});

$("#b2").mouseover(function(){$("#coords_xy").html("x(1); y(2);");});

...

$("#b512").mouseover(function(){$("#coords_xy").html("x(32); y(16);");});

и так 512 шт...

Для чего и почему 512 шт не спрашивайте, секрет большой)))

[Veseloff]

Эммм. Ну, если эти все 512 дивов единственные, то тогда:

$(div).mouseover(function(){$("#coords_xy").html("x(1); y(1);");});

Если нет, то можно задать им класс и сделать так:

$(".ourclass").mouseover(function(){$("#coords_xy").html("x(1); y(1);");});

А я бы обернул их в ещё один див и сделал бы так:

$("#bigdiv > div").mouseover(function(){$("#coords_xy").html("x(1); y(1);");});

[-O-J-A-]

...

Это я знаю, то что вы предложили проблему не решает, те же 512 штук... Мне саму координату надо вычислять, это нужно x(1) y(1) ...

Edited January 6, 2011 by -O-J-A-

[Veseloff]

А, так проблема в том, чтобы получить именно координату? Ну можно что-то типа такого:

$("#bigdiv > div").mouseover(function(){$("#coords_xy").html(x($(this).offset().top)+'; '+y($(this).offset().left)+';');});

Не уверен, что это сработает именно в таком виде, но, по крайней мере, через offset() можно решить задачу.

[-O-J-A-]

Немного не то, но спасибо , буду копать дальше как сделать не по пикселям, а по рядкам.

// вот сделал, извращенно, но работает:

<span id="coords_x"></span>

<span id="coords_y"></span>

<div id="x1" class="y1"></div>

$(document).ready(function() {

$("#backa div").mouseover(function() {

$("#coords_x").html($(this).attr("id"));

$("#coords_y").html($(this).attr("class"));

});

});

Edited January 6, 2011 by -O-J-A-

[s0rr0w]

Мда, тотальное jquery головного мозга.

Решение задачи лежит у вас под носом, только нужно для начала забыть про существование оЙгукн.

Решение первое. Медленное.

При наведении на какой-то элемент мы возвращаемся по дереву нод к его родительской ноде (parentNode), потом перебираем всех детей (childNodes) пока очередной элемент не совпадет с нашим исходным. Если совпал, то прекращаем цикл и запоминаем индекс, на котором сработало условие равенства.

Потом делим полученный индекс на 16 и округляем в меньшую сторону. Это будет наша координата Y. А потом берем остаток от деления на 16 нашего индекса. Это будет координата X.

Оформляем все вышеперечисленное в фукнцию и присваиваем ее в качестве обработчика всем элементам сразу.

Решение второе. Побыстрее

Проходим единоразово по всем элементам и присваиваем им нужные индексы в качестве свойств ноды. При наведении фукнция будет простой - показать свойство ноды.