Daniel Daniel - 1 month ago 4
jQuery Question

jQuery: how to allign image in the middle of a div using each function

I have created a script in order to center in the middle all images in a div using the each function. This is the code:


$('.column').each(function (){

var colHeight = $(this).innerHeight();
var colWidth = $(this).width();



var getCenter = (colHeight - imgHeight);
var toBeCentered = (getCenter / 2);

var toReduceWidth = (colWidth - imgWidth);
var getReducedWidth = (toReduceWidth / 2);



$('.myImg').css({'top': toBeCentered + 'px','left': 0});


});


With the var called toBeCentered I get the height of all divs


$('.myImg').css({'top': toBeCentered + 'px','left': 0});


The piece of code above displays always the last one .col div height and not all beginning from the very first.
How can I set the related div height to the images?

Answer

You have to do something like:

$('.column').each(function (){
    // ...
    $(this).find('.myImg').css({'top': toBeCentered + 'px','left': 0});

});

Because you are setting css attributes for all .myImg objects in every iteration of each function. Above solution will work if .myImg objects are in .column class.

Comments