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并将填充应用于每个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/

Answer 2

.css可以与第二个参数一起用作function [Ref]

将值返回到set的函数。这是当前的元素。接收集合中元素的索引位置和旧值作为参数。

$('button').on('click', function() {
  $('div').css('height', function() {
    var h = $(this).height() / 2;
    return h;
  });
});

div {
  float: left;
  width: 100px;
  background: green;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div style="height:100px">Hello</div>
<div style="height:50px">Hello</div>
<div style="height:200px">Hello</div>
<button>MakeThemHalf</button>

jQuery获取具有某个类

2 个答案:

Fiddle Demo