使用jQuery查找两个DIV之间的距离？

Question

我有两个DIV，我需要知道它们之间在浏览器中的距离（高度）。 我已经了解了offset特性，但是例子都不适用于我的情况。

示例用法：

<div class="foo"></div>
<div class="bar"></div>

我想知道这两者之间的距离。

请帮我使用jQuery动态查找距离。

- Idra

Answer 1

这样应该可以工作：

$('.foo').offset().top - $('.bar').offset().top

只要每个类在页面上只有一个元素。
如果它们不唯一，请为这两个元素指定ID并引用。

- threenplusone

---

没起作用，但是在查看您的代码后发现问题了！其中一个DIV出现了两次。 最终，我不得不使用另一种方法。 - Idra

它在坐标中不包括边框大小。 - Alex F

Answer 2

使用 .offset()：

$('.foo').offset().top - $('.bar').offset().top

- Dom

---

你的示例中使用了 .offset.top，应该改为 .offset().top。 - Axel

Answer 3

这个函数在没有使用jQuery的情况下，找到两个元素中心之间的像素距离：

function distanceBetweenElems(elem1, elem2) {
    var e1Rect = elem1.getBoundingClientRect();
    var e2Rect = elem2.getBoundingClientRect();
    var dx = (e1Rect.left+(e1Rect.right-e1Rect.left)/2) - (e2Rect.left+(e2Rect.right-e2Rect.left)/2);
    var dy = (e1Rect.top+(e1Rect.bottom-e1Rect.top)/2) - (e2Rect.top+(e2Rect.bottom-e2Rect.top)/2);
    var dist = Math.sqrt(dx * dx + dy * dy);
    return dist;
}

我是这样使用它的：

var target1 = document.querySelector('#foo');
var target2 = document.querySelector('#bar');
if (distanceBetweenElems(target1,target2)<100){
     target1.classList.add('active');
}

- bumsoverboard

---

只是一个提示 - (e1Rect.left+(e1Rect.right-e1Rect.left)/2) 可以简化为 (e1Rect.left + e1Rect.right) / 2 - 毕竟，中心就是左右边缘的平均值。 - Simon MᶜKenzie