如何获取两个元素之间的距离（中点）？

Question

我需要你的帮助！我有一些随机数量的 div 元素相互嵌套。

<div id="items">
    <div class="item">Item description</div>
    <div class="item">Item description</div>
    <div class="item">Item description</div>
    <div class="item">Item description</div>
</div>

每一个都有不同的高度，我需要计算它们之间的距离。重要的是距离应该是从每个物品的中心点测量的。

先感谢你！

或许我的图片能更好地解释比我可怕的英语：)

- YeppThat'sMe

---

请解释...所有的项是否间距相等？ - Roko C. Buljan

不行，因为它们每个的高度都不同，所以距离每次都不能相等。 - YeppThat'sMe

哦，对不起，它们之间没有真正的距离！！！我忘了！它们彼此相触。 - YeppThat'sMe

@YeppThat'sMe _也许我的图片能更好地解释它_？ :) - Ram

Answer 1

你可以尝试使用offset方法：

var $items = $('.item');
var fh = $items.eq(0).height();
var sh = $items.eq(1).height();
var first = $items.eq(0).offset().top + fh;
var two = $items.eq(1).offset().top;

var distance  = (two - first) + (fh/2) + (sh/2) ;

- Ram

---

你缺少一个关键因素：盒子的高度。 - Rob W

但是我没有中心到中心的距离？ - YeppThat'sMe

还不太对。OP想要得到物品中心点之间的距离。 - lampak

Answer 2

哦，我的天啊！有时候比你想象的更容易！

(相关的IT技术内容需要提供)

var currentCenterPoint = $('.current').outerHeight() / 2;
var nextCenterPoint = $('.current').next().outerHeight() / 2;

var amount = (currentCenterPoint + nextCenterPoint);

- YeppThat'sMe

Answer 3

jsBin演示

$('.item').each(function(){
  
  if( $(this).next().is('.item') ){    
       var myHalf = $(this).outerHeight(true)/2;
       var nextHalf = $(this).next('.item').outerHeight(true)/2;
       $(this).text('distance in between: '+ (myHalf+nextHalf) ); // TEST  
  }
                  
});  

- Roko C. Buljan

Answer 4

不要用<div>，试试用<ul>和<li>。

- Ramprasad