Question

我一直在捣乱我的大脑并搜索这个网站和其他人来弄清楚为什么我正在运行的脚本仅适用于我运行它的第一个div。我需要这个脚本来查找这个类的所有实例并修改它的CSS。这是一个垂直居中的脚本。

<script type="text/javascript">
    $(document).ready(function () {
        $(".innerDiv").css('top', ($(".outerDiv").height() - $(".innerDiv").height()) / 2);
    });
</script>

这是它应该运行的HTML的示例。

<div class="outerDiv" style="height:calc(100% - 20px); background:red;">
    <div class="innerDiv" style="max-height:100%; position:relative; background:green;">
        <textarea style="width:90%; height:100px; color:black; background:#CCC; resize:none; font-size:24px;"></textarea>
        <div style="height:10px;"></div>
        <span class="button">RESET</span>
        <span class="button">SEND</span>
    </div>
</div>

Answer 1

需要设置.outerdiv的高度，因为它与.innerdiv的高度相同。检查此fiddle

Jquery的：

 $(".innerDiv").css('top', ($(".outerDiv").height() - $(".innerDiv").height()) / 2);

HTML：

<div class="outerDiv" style="height:200px; background:red;">
    <div class="innerDiv" style="max-height:100%; position:relative; background:green;">
        <textarea style="width:90%; height:100px; color:black; background:#CCC; resize:none; font-size:24px;"></textarea>
        <div style="height:10px;"></div>
        <span class="button">RESET</span>
        <span class="button">SEND</span>
    </div>
</div>

而不是在＆＃39; px＆＃39;如果你想用％来做，那么你也可以用css来做。请参阅fiddle

HTML：

<div class="outerDiv" style="height:100%; background:red;">
    <div class="innerDiv" style="max-height:50%; position:relative; background:green;">
        <textarea style="width:90%; height:50%; color:black; background:#CCC; resize:none; font-size:24px;"></textarea>
        <div style="height:10px;"></div>
        <span class="button">RESET</span>
        <span class="button">SEND</span>
    </div>
</div>

CSS：

  .outerDiv {
        position : absolute;
    width:90%;
        height : 100%;
        background-color : #123456;
        text-align: center;
    }
    .outerDiv:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    .innerDiv {
        height : 50%;
        width : 90%;
        background-color : #FFFFFF;
        display: inline-block;
        vertical-align: middle;
    }

Answer 2

虽然$(".innerDiv").css('prop', 'value');会在每个$(".innerDiv")上将该属性更改为该值，但当您使用$(".outerDiv").height()和$(".innerDiv").height()作为该值计算的一部分时，会出现问题。在那里，jQuery使用它找到的第一个，并且它没有引用你试图定位的特定innerDiv / outerDiv对。

为此，您需要使用.each()：

$(".innerDiv").each(function() {
    $(this).css('top', ($(this).parent().height() - $(this).height()) / 2);
});

在页面加载上为每个Div运行jQuery脚本

2 个答案: