jquery - 如何获得 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 演示

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