Run function for each class you find

Asked

Viewed 946 times

6

I’m creating a mural of images inside thumbnails adjusting them automatically, where I use the calculation below:

if($('.thumb img').width()<$('.thumb img').height()){//portrait

  $('.thumb img').css({
    maxWidth:'100%'
  });
  $('.thumb img').css({
    marginTop:-(($('.thumb img').height()-$('.thumb').height())/2)
  });
}else{//landscape
  $('.thumb img').css({
    maxHeight:'100%'
  });
  $('.thumb img').css({
    marginLeft:-(($('.thumb img').width()-$('.thumb').width())/2)
  });
}

If I have feathers an image, it calculates well, but when I have images of different sizes it finds a bug. I was wondering if there’s a way for me to perform that function every time I find one div with the class .thumb, so I can treat image by image and structure them within their specific div’s.

javascript css jquery html

3 answers

5

To perform a certain function for each element is used:

$('.thumb img').each(function(){
if($(this).width()<$(this).height()){//portrait

 $(this).css({
    maxWidth:'100%'
  });
  $(this).css({
    marginTop:-(($(this).height()-$('.thumb').height())/2)
  });
}else{//landscape
  $(this).css({
    maxHeight:'100%'
  });
  $(this).css({
    marginLeft:-(($(this).width()-$('.thumb').width())/2)
  });
}
});

Notice that inside the way each all references to class .thumb and the element img, were exchanged for $(this), in that case the this points to the element being covered.

  • There was no need to change the references to $('.thumb').

  • 1

    the $('.Thumb') will not be this as I am running the loop directly on the img type elements that have this class, and not only in the class. but it could also be done only in class. but my understanding of the question said that it was only in this specific situation, correct me if I am wrong please.

  • 1

    Wonderful, thank you! was starting to smell burning here in the room rsrs... Thanks @Guerra

  • No problems Leandroluk, don’t forget to mark the correct answer as "right" to help future users with the same question.

  • Just need to see this $('.Thumb') right there because if it has more than 1 element it will return an array and you will not be able to get the width or height as you want, how will it work? will be a model element?

  • If all the .thumb have the same dimensions there will be no problem ($('.thumb').width() returns the width of the first element found). I understood that it would be necessary to take the container of each specific image, so I used $(this).closest('.thumb') in my reply.

  • Really @bfavaretto is right, you have to see exactly what $('.Thumb') you want, to make the correct capture

Show 2 more comments

3

You need a loop:

$('.thumb img').each(function(){
    var img = $(this);
    var proporcao = img.width() / img.height();

    // Retrato
    if(proporcao > 1) {
        img.css({
            maxWidth:'100%',
            marginTop:-((img.height()-img.closest('.thumb').height())/2)
        });

    // Paisagem
    } else {
        img.css({
            maxHeight:'100%',
            marginLeft:-((img.width()-img.closest('.thumb').width())/2)
        });
    }
});

3

A jQuery function for this purpose is the .each() which allows the execution of a code block for each located element:

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

   // o teu código aqui
});

Browser other questions tagged javascript css jquery html

You are not signed in. Login or sign up in order to post.