This code checks whether an image whose parent is .papers.left has completely loaded into DOM and if yes then the background of its right content's height has to be same as the background of this images parent. So below is html to understand the structure<div class=row>     <div class=col-md-6>          <div class=papers left text-center>               <img src=http://wowthemes.net/demo/leroy/img/dummies/18.jpg alt=><br /> <!--Once the above image is completely loaded I want to set `.papers.right` height as same as `.papers.left` div-->          </div>     </div>     <div class=col-md-6>          <div class=papers right text-center>               <blockquote>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages. <cite>Jogn De, Birthday Event<br /><i class=fa fa-star></i> <i class=fa fa-star></i> <i class=fa fa-star></i> <i class=fa fa-star></i> <i class=fa fa-star></i></cite>                </blockquote>          </div>     </div></div>So to set same height I have written below js code which will set the height of div.papers.right same as div.papers.left but only when the image is loaded completely$('img').each(function () {    if ($(this).closest('.papers.left').length)    {        $(this).on('load', function () {            $(this).closest('.row').find('.papers.right').height($(this).closest('.papers.left').height());        })    }})Can the above piece of jQuery code be optimized? I am not sure whether the above code can be optimized to some simple one.UpdateI just realized one more requirement so that whichever's height is greater assign that height to other one and I've made below changes to code and I would like to know if there is any improvement that can be done to the below code. Extremely sorry for the inconvenience.$('img').each(function () {    if ($(this).closest('.papers.left').length)    {        $(this).on('load', function () {            if ($(this).closest('.papers.left').height() > $(this).closest('.row').find('.papers.right').height())              //if left side has greater height assign it to right side                $(this).closest('.row').find('.papers.right').height($(this).closest('.papers.left').height());            else            //vice versa                                $(this).closest('.papers.left').height($(this).closest('.row').find('.papers.right').height());        })    }})
Adjusting the height of a div to match that of another column
javascript;performance;jquery;image;layout
You can save $(this).closest('.papers.left') into a local variable since you access it twice. This might improve performance. It can also enhance code readability:$('img').each(function () {    var parent = $(this).closest('.papers.left');    if (parent.length)    {        $(this).on('load', function () {            $(this).closest('.row').find('.papers.right').height(parent.height());        })    }})As an add on to your code modification, I don't know that this is faster, but why not try assigning max height to both without checking which is taller? Something like:$('img').each(function () {    var parent = $(this).closest('.papers.left');    if (parent.length)    {        $(this).on('load', function () {            var sibling = $(this).closest('.row').find('.papers.right');            var height = Math.max(parent.height(), sibling.height());            parent.height(height);            sibling.height(height);        })    }})It's certainly shorter and more readable. Why not test it out to see how the efficiency compares?