クラスのすべてのインスタンスを反復処理して関数で使用する方法はありますか？

Question

私は.photo-card-image-wrapperという名前のすべてのクラスを反復するために使用する必要がある関数cropAndCenterImage()を持っています。私はjqueryのでeach()機能を実行する方法を知っているが、cropAndCenterImage()関数の入力パラメータがcropAndCenterImage(".photo-card-image-wrapper")、それのすべてのインスタンスのようにクラスの名前にする必要があります。

これは私がこれまで持っているものです。

$(function() { 
    $("div.photo-card-image-wrapper").each(function() { 
     cropAndCenterImage("every instance of photo-card-image-wrapper class"); 
    }); 
});` 

EDIT

 function cropAndCenterImage(el, size) { 
      //el = img wrapper 
      //img = img element 
      if (size === undefined || size === null) { 
       var portfolio = document.getElementById("portfolio").offsetWidth; 
       console.log(portfolio); 
       if (portfolio < 1200) { 
        size = portfolio/4; 
       } else if (portfolio < 960) { 
        size = portfolio/3; 
       } else { 
        size = portfolio/5; 
       } 
      } 
      var $el = $(el); 
      var $img = $(el + " img"); 
      console.log($el); 
      console.log($img); 
      $img.width("auto").height("auto"); 
      var imgWidth = $img.width(); 
      var imgHeight = $img.height(); 
      console.log(imgHeight, imgWidth); 

      //hopefully that returns the img to it's default height and width by making the inline style to empty quotes 

      if(imgWidth > imgHeight) { 
       //Crop image 
       //console.log("width greater than height"); 
       if (imgHeight >= size ) { 
        console.log("hit if"); 
        $img.height(size); 
        imgHeight = $img.height(); 
        imgWidth = $img.width(); 
        $el.height(imgHeight).width(imgHeight); 
       } else { 
        console.log("hit else"); 
        $el.height(imgHeight).width(imgHeight); 
        $img.height(imgHeight).width(imgWidth); 
       } 

       //Center image horizontally 
       var leftInt = (imgWidth - $el.width())/2; 
       $img.css({ "margin-left": "-" + leftInt + "px", "margin-top": "0" }); 
      } else { 
       //Crop image 
       console.log("height greater than width"); 
       if (imgWidth >= size ) { 
        $img.width(size); 
        imgHeight = $img.height(); 
        imgWidth = $img.width(); 
        $el.height(imgWidth).width(imgWidth); 
       } else { 
        $el.height(imgWidth).width(imgWidth); 
        $img.height(imgHeight).width(imgWidth); 
       } 
       imgHeight = $img.height(); 
       //Center image vertically 
       var topInt = (imgHeight - $el.height())/2; 
       //console.log(topInt); 
       $img.css({ "margin-top": "-" + topInt + "px", "margin-left": "0"}); 
      } 


     } 

HTML

<div class="photo-card-image-wrapper"><a href="images/art1.jpg" class="gallery" data-lightbox="portfolio"><img src="images/art1.jpg" class="art" /></a></div> 
<div class="photo-card-image-wrapper"><a href="images/art2.jpg" class="gallery" data-lightbox="portfolio"><img src="images/art2.jpg" class="art" /></a></div> 
<div class="photo-card-image-wrapper"><a href="images/art3.jpg" class="gallery" data-lightbox="portfolio"><img src="images/art3.jpg" class="art" /></a></div> 
<div class="photo-card-image-wrapper"><a href="images/art4.jpg" class="gallery" data-lightbox="portfolio"><img src="images/art4.jpg" class="art" /></a></div> 
<div class="photo-card-image-wrapper"><a href="images/art5.jpg" class="gallery" data-lightbox="portfolio"><img src="images/art5.jpg" class="art" /></a></div> 
        etc 

Answer 1

$(function() { 
    $("div.photo-card-image-wrapper").each(function() { 
     cropAndCenterImage($(this)); 
    }); 
});