獲得正確的jQuery中

元素的相對偏移到它的偏移父

<div id="main" style="position: relative; width: 900px;"> 
    <div id="wrapper" style="padding: 40px;"> 
     <div id="newdiv" style="position: absolute;"> 
      Some content 
     </div> 
     <div id="existingdiv"> 
      Some existing content 
     </div> 
    </div> 
</div>

我可能錯過了一些CSS，但本質上的結果是，主要有固定寬度，包裝是相同的寬度減去填充，existingdiv是與包裝相同的寬度，newdiv具有其內容的寬度。我正在研究一個插件，所以html/css可能會有所不同，但我在這個特定場景中遇到了困難。

newdiv是由js插入的，我試圖將其右手側與existingdiv的右側對齊。 newdiv中的內容將會改變，所以通過設置newdiv的'right'屬性來做到這一點是有意義的。然而，確定這應該是什麼價值證明是困難的。

使用jQuery的position（）方法返回正確的頂部和左側（40px）偏移量。我找不到使用jQuery的方式來返回offsetParent的全部寬度。我已經回覆到常規的JavaScript：

var el = document.getElementById('existingdiv'); 
var right = el.offsetParent.offsetWidth - el.offsetWidth - el.offsetLeft; 
$('#newdiv').css('right', right);

我已經使用jQuery UI的擴展位置的方法，然而，這似乎來計算相對於文檔newdiv的位置也試過，但是值是相對於「主」所以它最終在錯誤的地方。

這是最好的方式去做我想做的事情，或者我錯過了什麼？這會在所有情況/瀏覽器中工作，還是可能存在其他問題？

來源

2010-08-23 Nick

您是否因爲填充而出現問題？您可以使用.outerWidth（）來包含填充，邊框和可選邊距。 outerWidth API

來源

2010-08-23 21:26:13 Mark

這是因爲填充，但在這種情況下，outerWidth正在爲existingdiv返回820px - 這是正確的，這是它的外部寬度。但它不是我正在尋找的 - 我正在尋找offsetParent的完整偏移量。 – Nick 2010-08-23 21:29:13

所以你想要父母的outerWidth？你可以使用.parent（）。outerWidth（）來升級。 existingDiv上的outerWidth將不包含其父項的填充。 – Mark 2010-08-23 21:38:50

不，我想要offsetParent的outerWidth，它是一個元素的屬性等於最接近的父元素的位置。我找到了一個解決方案，見下文。 – Nick 2010-08-24 21:10:28

我想我可以使用jQuery最接近的是：

var el = $('#existingdiv'); 
$('#newdiv').css('right', el.offsetParent().width() - el.outerWidth() - el.position().left);

同樣可以達到獲得底部：

$('#newdiv').css('bottom', el.offsetParent().height() - el.position().top);

連同這些將使newdiv右下方在existingdiv的右上角的角落。

我不認爲我可以通過其他現有的jquery方法獲得這種信息，這可能對jquery（或jquery ui）本身非常有用。

來源

2010-08-24 21:20:38 Nick

獲得正確的jQuery中

回答

相關問題