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

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

Answer 4

<div>で試す代わり<ul>に<li>。