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的最低排名-而不仅仅是最后一个。 并且position函数必须不正确，因为它返回的是“ this.position不是函数”

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的底部位置

Answer 2

这将为您提供最后一个div的位置，而无需遍历div

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