Как определить, находится ли один Div справа или слева от другого Div?Jquery Javascript

Question

Скажите, что у вас есть это:

<div id="1"></div><div id="2"></div><div id="3"></div>

Можете ли вы использовать javascript / jquery, чтобы найти id = "2" справа от id = "1"?

Answer 1

, если вы ищете div, который предшествует # 2, сделайте что-то вроде этого:

$("#2").prev("div")

Answer 2

Я бы сделал что-то вроде:

function is_div2_after_div1() {
  is_after = null;
  $("#parent > div").each(function(i, el) {
    if (is_after !== null) return;
    if (el.id && el.id == "div1") is_after = true;
    if (el.id && el.id == "div2") is_after = false;
  }
  return is_after;
}

Answer 3

Да. То, как вы это проверяете, зависит от того, что вы подразумеваете под «направо».

Вы можете использовать метод offset для определения положения двух элементов:

o1 = $('#1').offset();
o2 = $('#2').offset();

Теперь вы можете сравнить свойства left и top объектов o1 и o2.

Если вы под «направо» имеете в виду, что они находятся рядом друг с другом, а второй div находится справа, вы должны сравнить оба свойства:

if (o1.top == o2.top && o1.left < o2.left) ...

Если вы имеете в виду только то, что второй div должен быть ближе к правому, чем первый, вам нужно сравнить только свойства left:

if (o1.left < o2.left) ...

Обратите внимание, что id не должен начинаться с цифры. Например, допустимо использование id="x1" и id="x2".

Answer 4

Вы можете получить их позиции, и если позиция div # i1 меньше, чем позиция div # i2 (их позиция x, если хотите).http://api.jquery.com/position/

#Requires jQuery
var d1x = $('div#i1').position().left,
    d2x = $('div#i2').position().left;

$('span').html((d1x < d2x) ? "yes" : "no");

Я не думаю, что идентификаторы могут быть только числовыми.Это может сработать, но это не очень хорошая практика.

jsFiddle: http://jsfiddle.net/PKpdp/

Answer 5

Я не эксперт, но нет, я не думаю, что вы можете.

Прежде всего, вы говорите в коде или как он появляется на экране? 3 div, перечисленные как, на самом деле будут отображаться в каждой строке. Вам нужно использовать пролеты, чтобы держать их все в одной строке.