JQuery или JavaScript получить элемент рядом с другим элементом

Question

Как (с помощью JQuery или JavaScript ...)

<div style="background-color:red;height:10px;width:10px;float:left;"></div> 
<div style="background-color:red;height:10px;width:10px;float:left;margin-left:25px;"></div> 
<br> 
<div style="background-color:red;height:10px;width:10px;margin-left:15px;" id="2"> 

Могу ли я получить то, что элемент находится ближе всего к id=2? Мне нужен этот тип селектора, и любая помощь будет оценена. :)

Обратите внимание, что я не возражаю против установки position:relative или absolute и left:(number)px.

Мне нужен код, который будет работать в динамической среде; вы знаете, когда блоки продолжают создаваться и продолжают прокручиваться вперед и менять левую позицию. Могу ли я использовать .position()? Каким-то образом?

спасибо. :)

Answer 1

Это весело мысленный эксперимент ...

Чтобы решить эту проблему, вы, вероятно, захотите рассчитать t он offset каждого элемента и сравните эти координаты (top и left) с другими элементами.

Предполагая, что вы хотите найти элемент ближе к compareEl, и у вас есть compareElTop и compareElTop, цикл через все элементы на экране (кроме compareEl), и сделать что-то вроде этого:

var topDiff = Math.abs(compareElTop-elements[x].offset().top); 
    leftDiff = Math.abs(compareElLeft-elements[x].offet.left); 

пара с самым низким topDiff+leftDiff ближайший.

Here is a nice jsFiddle for you to play around with! All kinds of awesome.

Answer 2

Например, если вы хотите получить элементы DOM, который находится ближе всего с # 2:

<span>before</span> 
    <div style="background-color:red;height:10px;width:10px;margin-left:15px;" id="2"> </div> 
    <span>after</span> 

Javascript:

$(function(){ 
    var prevIt = $('#2').prev(); 
    var nextIt = $('#2').next(); 
}); 

Вот demo