jquery - 在页面加载时为每个 Div 运行 jQuery 脚本

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

虽然 $(".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);
});