wordpress - Using jQuery to modify CSS: Not Affecting CSS Consistently -

i building custom child theme built on genesis framework , enqueueing jquery script calculates image bottom margin based on height of image (only in “diary” category). calculation seems working properly, css being modified inconsistently. when navigate page works properly, other times doesn’t. if refresh page, doesn’t work. happening in safari, chrome, firefox (all on mac).

this how enqueuing script in functions.php:

add_action( 'wp_enqueue_scripts', 'lpt_enqueue_script' ); function lpt_enqueue_script() {     wp_enqueue_script( 'variable-margins', get_stylesheet_directory_uri() . '/js/variable-margins.js', array( 'jquery' ), '', false ); } 

the script looks this:

jquery(document).ready( function() {     if (jquery('.category-diary img').length > 0){         var lineheight = 21;         jquery('.category-diary img').each(         function() {             var remainder = jquery(this).height() % lineheight;             jquery(this).css({'margin-bottom': (remainder - 5 + (lineheight)) + 'px'});         });          }; }); 

the url 1 of single pages images should affected is: http://lovelandprovincetown.com/this-is-a-test-post/.

any ideas why isn't working properly?

i should mention desired outcome of script variable image bottom margins in order preserve line-height text in left , right columns aligned each other. perhaps there method achieve this?

your function better placed within jquery(window).load() wrapper, rather doc ready. allows images load , heights calculated script.

(function($, window) {      $(window).load(function()      {         var images = $('.category-diary img');          if (images.length > 0)         {             var lineheight = 21;              images.each(function(index)             {                 var self = $(this),                     remainder = self.height() % lineheight;                  self.css({                     'margin-bottom': ((remainder - 5) + lineheight) + 'px'                 });             });         }     }); })(jquery, window);