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