如何迭代類的每個實例並在函數中使用它？

Question

我有一個函數cropAndCenterImage()，我需要使用迭代每個類.photo-card-image-wrapper。我知道如何做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"); 
    }); 
});` 

編輯

 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)); 
    }); 
});