css - Running jQuery Script for Each Div on Page Load -


i've been wracking brain , searched through site , others figure out why script i'm running works on first div run on. need script find instances of class , modify css. it's vertically centering script.

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

this example of html should running on.

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

while $(".innerdiv").css('prop', 'value'); change property value on every $(".innerdiv"), problem comes in when use $(".outerdiv").height() , $(".innerdiv").height() part of value calculation. there, jquery uses first 1 finds, , doesn't refer specific innerdiv/outerdiv pair you're trying target.

for that, need use .each():

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

Comments

Popular posts from this blog

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

asp.net - Problems sending emails from forum -