javascript - jQuery 获取某个类的页面上每个 div 的高度

Question

我有一个页面，其中包含多个类为 .layers-content-widget 的 div。每个 div 都有不同数量的内容，所以它们的大小不同，我想让它们都与页面大小相同，不管有多少内容(当然除非内容多于页面高度)同时仍然有内容位于 div 的中间。

这是我的 jQuery:

var pageHeight = $(window).height();
var sectionInnerHeight = $('.layers-content-widget').innerHeight();
$('.layers-content-widget').css('padding-top', ((pageHeight-sectionInnerHeight)/2));
$('.layers-content-widget').css('padding-bottom', ((pageHeight-sectionInnerHeight)/2));

这里的想法是获取页面高度和内容高度(使用 innerHeight)，将此数字除以 2 并将其添加为顶部和底部的填充 - 然后内容将位于中间整页部分。

我遇到的问题是此代码适用于第一个 div，但随后对页面上的所有其他 div 应用相同数量的填充。我知道我需要使用 this 但不确定我的最终代码应该是什么样子

Answer 1

您的代码只运行一次并将计算出的填充应用于每个 div。您需要做的是解析所有有问题的 div 并将填充分别应用于每个 ...

var pageHeight = $(window).height();
$('.layers-content-widget').each(function() {
    var $this = $(this);
    var sectionInnerHeight = $this.innerHeight();
    $this.css({
        'padding-top': ((pageHeight - sectionInnerHeight) / 2),
        'padding-bottom': ((pageHeight - sectionInnerHeight) / 2)
    });
});

这是each 的 jQuery 文档，这是您真正缺少的所有...

http://api.jquery.com/jquery.each/