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
Post a Comment