javascript - 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>

最后一个 page-content 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 is not a function”

Answer 1

@Rudi 在评论中提到 https://api.jquery.com/position/返回一个包含属性 top 和 left 的对象..所以你可以使用这个

$('.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-page 中最后一个 .page-content 的底部位置