Получение местоположения ближайшего родственника на keydown

Question

Я добавляю результаты в обертку, чтобы увидеть, правильно ли они заняты. Он отлично работает для игрока div (#redbox). Однако он не обновляет положение (.shd) ближайшего вражеского дивизиона.

Полный код здесь: http://jsfiddle.net/2bbW5/ Просто двигайтесь вправо и вправо с помощью клавиш со стрелками, и вы увидите, как он печатает одну и ту же позицию противника каждый раз, но каждый раз печатает позицию нового игрока.

$('.gamewrapper').on('keydown', function (event) { 
     var a = event.which; 
     var b = parseInt($x.css('left'), 10); 
     var c = parseInt($x.css('top'), 10); 
     var player_position = $('#redbox').position(); 
     var enemy_position = $('#redbox').siblings().closest('.shd').position(); 
     $('<p> Player position is : ' + player_position.left + ' and ' + player_position.top + '</p>').appendTo('.gamewrapper'); 
     $('<p> Enemy position is : ' + enemy_position.left + ' and ' + enemy_position.top + '</p>').appendTo('.gamewrapper'); 

Что я делаю не так, что он не обновляет позицию ближе всего вражеского Div в по отношению к #redbox?

Answer 1

.closest() не сообщит вам, какой родной брат физически ближайший к другому элементу. Вы должны сами это вычислить.

Вот один подход, который использует .each() вычислить и сохранить расстояние до каждого противника, а затем .filter() сократить набор братьев и сестер к ближайшему врагу:

var player_position = $('#redbox').position(); 
    var closest_dist = Number.POSITIVE_INFINITY; // largest number in JavaScript 
    var enemy_position = $('#redbox').siblings('.shd').each(function() { 
     var epos = $(this).position(); 
     var dist = Math.sqrt(Math.pow(player_position.left - epos.left, 2) + Math.pow(player_position.top - epos.top, 2)); // basic distance formula 
     $(this).data('dist', dist); // easier than building an array 
     closest_dist = Math.min(closest_dist, dist); // update the closest_dist variable 
    }).filter(function() { 
     return $(this).data('dist') - closest_dist < 0.001; // allow for floating-point errors 
    }).first().position(); // use .first() since there might be more than one 

http://jsfiddle.net/ApY46/