警報顯示元素之間的距離

Question

我有一個包裝。在包裝內我有一個內包裝。在內包裝內我有一個跨度。在那個跨度mouseenter上，我想要一個警報來顯示該跨度的中間和包裝的右邊界之間的距離（主要的：#wrapper）。我用position（）嘗試了一些東西，但沒有達到我剛剛提到的內容。

http://jsfiddle.net/ZP7Lt/

我的HTML：

<div id="wrapper"> 
    <div id="inner-wrapper"> 
     <span id="me">It's me</span> 
    </div> 
</div>​ 

我的CSS：

#wrapper{ 
    width:400px; 
    height:300px; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:100px; 
    background-color:yellow;} 

#inner-wrapper{ 
    position:absolute;    
    width:100px; 
    margin-left:100px; 
    margin-top:50px; 
    background-color:blue;} 

#me{ 
    background-color:pink;} 

我的JS：

$('#me').mouseenter(function(){ 


    alert("distance from middle of span till right border of #wrapper???"); 

})​ 

Answer 1

$('#me').mouseenter(function(){ 
    var $wrapper = $("#wrapper"), $this = $(this); 
    alert("distance from middle of span till right border of #wrapper is " + ($wrapper.width() - ($this.offset().left - $wrapper.offset().left + $this.width()/2))); 
})​; 

工作演示 - http://jsfiddle.net/ShankarSangoli/NxhWk/

Answer 2

你可以使用一個combinatio的offset() n和width()

$('#me').mouseenter(function(){ 
    var middle = $(this).offset().left + $(this).width()/2; 
    var wrapperRight = $("#wrapper").offset().left+$("#wrapper").width(); 

    alert(wrapperRight - middle); 

})​ 

編輯： 修正了一個數學錯誤

Demo

Answer 3

試試這個，我希望它能幫助

var spanLeft = $("#me").offset().left; 
var wrapper = $("#wrapper").offset().left;     
alert("distance from middle of span till right border of #wrapper???"); 
alert(spanLeft - wrapper);