Есть группа из оприделенного количества див div, которые расбросаны случайным образом. Некоторые из этой группы div стоят рядом(по корординатам (left, top )). Нужно вычислить div, которые стоят рядом друг возле друга(по их координатам).
div генерируеться каждый раз разное количество (всегда чётное), после генерации div, как раз и будет запускаться скрипт проверки соседних div.
Нужно вывести например в консоль все дивы которые друг с другом стоят рядом , у меня в примере "block_2" и "block_4" а также "block_1" и "block_3" стоят друг возле друга. Должно получиться что-то типа " "block_2 и block_4 , block_1 и block_3 - рядом"
Вот как я попытался это реализовать :
var rects = {};
var checed_position = function(){//-- функция проверки на совпадения
var t_left; //--- координаты елементов то левой стороны
var t_top; //--- координаты елементов от верху
var create_mass = function (){
$( ".rects" ).each(function(index, element) {
rects[index] = element;
t_left = $(element).offset().left;
t_top = $(element).offset().top;
console.log(t_top)
});
$.each(rects, function(key, value) {
if(t_top == $(value).offset().top){
if(t_left == $(value).offset().left + 88 || t_left == $(value).offset().left - 88){ // --- вычисляем есть ли совпадения с какойто из сторон
alert("Есть совпадения");
console.log($(value));
}
}else{
console.log("Нет совпадний");
console.log($(value).offset().left)
}
});
}
create_mass();
}
checed_position();
#block_1,#block_2, #block_3, #block_4, #block_5{
width: 88px;
height: 100px;
margin: 50x;
text-align: center;
float: left;
cursor: pointer;
position: absolute;
}
#block_1 {
background-color: #f443a1;
left: 388px;
top: 300px;
}
#block_2 {
background-color: chartreuse;
left: 500px;
/* top: 200px; */
}
#block_3 {
background-color: aqua;
left:300px;
top: 300px;
}
#block_4 {
background-color: #5b00ff;
left: 588px;
}
В привере выше функция показывает сопадения при этом выводит ток один div, должно быть 4.
Кто делал ранше такое, полдскажыте как реализовать?
Ответ
У вас $.each(rects, fn) выполняется до того, как создан весь объект reacts; Оберните её в таймаут например:
setTimeout(function(){
$.each(rects, fn);
}, 0)
Комментариев нет:
Отправить комментарий