在頁面加載中爲每個div運行jQuery腳本

我一直在繞過我的大腦，搜索這個站點和其他人以找出爲什麼我運行的腳本只能在第一個div上運行。我需要這個腳本來找到這個類的所有實例並修改它的css。這是一個垂直居中的腳本。在頁面加載中爲每個div運行jQuery腳本

<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>

來源

2016-11-10 Larry Maner

也許因爲你只有1分度類'innerDiv'？ – Dekel

嗨拉里，我已經在這裏設置了筆：http：//codepen.io/xszaboj/pen/woMzMG？editors = 1010。你能告訴我這個例子有什麼問題嗎？ – xszaboj

Dekel，這是它需要調用該腳本的其中一個div的示例。其他div使用相同的類名。 Xszaboj，我會盡快回家。 –

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

來源

2016-11-10 17:43:03 andi

安迪，這工作的魅力！謝謝！ –

需要設置的高度.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>

而不是在 '像素' 給予高度，如果你想這樣做的％，那麼你可以使用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; 
    }

來源

2016-11-10 17:30:16 RonyLoud

在頁面加載中爲每個div運行jQuery腳本

回答

相關問題