使用jQuery查找一個元素相對於另一個元素的距離

Question

我有一系列在每個頁面上重複10次的文章。該結構是像這樣：

<article class="postWrap"> 
    <h2>Title</h2> 
    <p>Here is text</p> 
</article> 

我需要找到距離p標籤是對文章的頂部。因此，根據標題的長度，p標籤距文章頂部的距離可能會有所不同。最好的方法很可能是使用offset()，但我無法正常工作。

感謝

UPDATE：

這裏是工作的代碼我寫的，但我想有是繞了一個更好的辦法：從你的問題假設

$(".postWrap").each(function(){ 
     var postWrap = $(this).offset().top; 
     var firstP = $(this).find("p:first-of-type").offset().top; 
     var diff = firstP - postWrap; 
     var meta = $(this).find(".meta").css({'marginTop' : diff}) 

}); 

Answer 1

有始終正好是您的第一個<p>之前的一個<h2>元素，您可以使用<h2>元素的高度（outerHeight）代替計算偏移量作爲快捷鍵：

$(".postWrap").each(function(){ 
    var diff = $(this).find('h2:first').outerHeight(); 
    var meta = $(this).find(".meta").css('margin-top', diff); 
}); 

從你的榜樣，我沒有得到什麼.meta是的，但你可以試試，並告訴我，如果它按預期工作。如果情況更好，你也可以使用innerHeight。

編輯：或作爲 「一個班輪」 不聲明變量：

$(".postWrap").each(function(){ 
    $(this).find(".meta").css(
     'margin-top', 
     $(this).find('h2:first').outerHeight() 
    ); 
});