JavaScript How can I optimize the jquery script to improve performance? optimize javascript jquery

I have this JQuery script that is looking at some DIVs and getting the image sizes and setting the div size according to the images.

I had a JQuery script to get all the DIVs and loop to each image and get the size and set the DIV size according to the correct size. The problem was that the script was running strange, it only worked when I refresh(F5) the page. Now if I change to get all the images first and loop to get the size it works fine. The only issue with the second option is that I don't know what images belong to what DIVs, so I had to add an extra loop to get all the images from the correct DIV.

Here is my code:

$('.groupContainer').imagesLoaded(function($images){
        $(this).each(function(){
            var rowWidth = 16;
            $(this).imagesLoaded(function($images){
                $images.filter(':not(".overlayBoxImage")').each(function(){
                    if($(this).context.id != 'groupTitle'){
                        $(this).parent().parent().parent().css('width', $(this).width());
                    }
                    rowWidth += $(this).width();
                });
                if(rowWidth > maxWidth){
                    maxWidth = rowWidth;
                    $('.vnBreadcrumbsCont').css({width: maxWidth, 'max-width':maxWidth});
                    $('.guideDescCont').css({width: maxWidth, 'max-width':maxWidth});
                    $('#headerContainer').css({width: maxWidth});
                    $('.groupContainer').css({width: maxWidth,'max-width': maxWidth});
                    $('#guideContainer').css({width: maxWidth, 'max-width': maxWidth});
                }
            });
        });
    });

I would like some help to see if I can optimize the LOOPs. Because current I'm looping to get the image (don't do anything with it), and looping again to get all the DIV and looping again to get all the images and doing the calculation.

This is the script I had before, but it does not work proper because I load the DIVs first and loop the images.

$('.groupContainer').each(function(){
        var rowWidth = 16;
        $(this).imagesLoaded(function($images){
            $images.filter(':not(".overlayBoxImage")').each(function(){
                if($(this).context.id != 'groupTitle'){
                    $(this).parent().parent().parent().css('width', $(this).width());
                }
                rowWidth += $(this).width();
            });

            if(rowWidth > maxWidth){
                maxWidth = rowWidth;
                $('.vnBreadcrumbsCont').css({width: maxWidth, 'max-width':maxWidth});
                $('.guideDescCont').css({width: maxWidth, 'max-width':maxWidth});
                $('#headerContainer').css({width: maxWidth});
                $('.groupContainer').css({width: maxWidth,'max-width': maxWidth});
                $('#guideContainer').css({width: maxWidth, 'max-width': maxWidth});
            }
        });
    });