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

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>

每个都有不同的高度，我必须计算它们之间的距离。距离每个项目的每个中间点非常重要。

提前致谢！

也许我的形象会比我可怕的英语更好地解释:)

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) ;

Answer 2

哦，天啊！有时它比你想象的要容易！

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

var amount = (currentCenterPoint + nextCenterPoint);

Answer 3

而不是<div>尝试<ul>与<li>。

Answer 4

jsBin demo

$('.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  
  }

});