如何迭代类的每个实例并在函数中使用它？

我有一个函数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

来源

2017-10-08 Bill Hicks

您可以使用$（this）来访问循环中的当前元素 –

请先阅读https://api.jquery.com/each/ –

'$（this）'并不适合我的工作，已经添加了上面的功能的其余部分。 –

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

来源

2017-10-08 18:07:20

通常最好是解释一个解决方案，而不是只发布一些匿名代码行。你可以阅读[我如何写一个好的答案]（https://stackoverflow.com/help/how-to-answer），还有[完全解释基于代码的答案]（https://meta.stackexchange.com /问题/ 114762 /解释-entirely-％E2％80％8C％E2％80％8Bcode基于-答案）。 –

如何迭代类的每个实例并在函数中使用它？

回答

相关问题