jQuery - 循環通過父div，獲取最後一個子div的底部位置

Question

我想通過父div來循環並獲得最後一個子div的底部位置。

<main id="swipe-page"> 
    <div class="dragend-page"> 
     <div class="page-content"></div> 
     <div class="page-content"></div> 
     <div class="page-content"></div> 
    </div> 
    <div class="dragend-page"> 
     <div class="page-content"></div> 
     <div class="page-content"></div> 
    </div> 
    <div class="dragend-page"> 
     <div class="page-content"></div> 
     <div class="page-content"></div> 
     <div class="page-content"></div> 
     <div class="page-content"></div> 
     <div class="page-content"></div> 
    </div> 
</main> 

最後一頁內容div的底部位置將被設置爲父dragend-page div的總高度。我將如何做到這一點？

$.each($('.dragend-page'), function(i, dragend_page) { 
    $('.page-content', dragend_page).each(function() { 
     var p = this.position(); 
     console.log(p.bottom); 
    }); 
}) 

這是獲得所有子div的底部位置 - 不只是最後一個。而且因爲它返回「this.position是不是一個函數」

Answer 1

如@Rudi在評論https://api.jquery.com/position/返回一個包含屬性頂部的對象，並留下提及的位置功能必須是不正確的..所以你可以使用這個

$('.dragend-page').each(function(i, dragend_page) { 
    var lastDiv = $(this).find('.page-content:last-child'); 
    var bottomPosition = lastDiv.position().top + lastDiv.outerHeight(true); 
    console.log(bottomPosition); 

}) 

此代碼將輸出在每個.dragend頁

Answer 2

this會給你最後一個div的位置，而無需通過的div循環最後。第內容的底部位置

$(function(){ 
    console.log($(".dragend-page :last-child").last().position()); 
});