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

我有一个函数

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


        }

功能中心图像（el，大小）{
//el=img包装
//img=img元件
如果（大小==未定义| |大小===空）{
var组合=document.getElementById（“组合”）.offsetWidth；
console.log（公文包）；
如果（投资组合<1200）{
规模=投资组合/4；
}else if（投资组合<960）{
规模=投资组合/3；
}否则{
规模=投资组合/5；
}
}
变量$el=$（el）；
变量$img=$（el+“img”）；
控制台日志（$el）；
console.log（$img）；
$img.宽度（“自动”）.高度（“自动”）；
var imgWidth=$img.width（）；
var imgHeight=$img.height（）；
console.log（imgHeight、imgWidth）；
//希望通过将内联样式设置为空引号，将img返回到默认的高度和宽度
如果（imgWidth>imgHeight）{
//作物图像
//控制台。原木（“宽度大于高度”）；
如果（imgHeight>=尺寸）{
控制台日志（“命中如果”）；
$img.高度（尺寸）；
imgHeight=$img.height（）；
imgWidth=$img.width（）；
$el.高度（imghight）、宽度（imghight）；
}否则{
控制台日志（“点击其他”）；
$el.高度（imghight）、宽度（imghight）；
$img.高度（imghight）.宽度（imgWidth）；
}
//水平居中图像
var leftInt=（imgWidth-$el.width（））/2；
$img.css（{“左边距”：“-”+leftInt+“px”，“上边距”：“0”}）；
}否则{
//作物图像
控制台。原木（“高度大于宽度”）；
如果（imgWidth>=大小）{
$img.宽度（尺寸）；
imgHeight=$img.height（）；
imgWidth=$img.width（）；
$el.高度（imgWidth）.宽度（imgWidth）；
}否则{
$el.高度（imgWidth）.宽度（imgWidth）；
$img.高度（imghight）.宽度（imgWidth）；
}
imgHeight=$img.height（）；
//垂直居中图像
var topInt=（imgHeight-$el.height（））/2；
//控制台日志（topInt）；
$img.css（{“页边顶部”：“-”+topInt+“px”，“页边左侧”：“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

等

您可以使用$（this）访问循环中的当前元素。首先读取此

$（this）

对我来说不起作用，我已经添加了上述函数的其余部分。@BillHicks请给出一个您针对的html示例。我不知道

div

是否包含您试图访问的其他元素，因为您没有提到任何关于您试图访问的元素的内容。@newoj就这样。通常最好解释一个解决方案，而不是只发布几行匿名代码。你可以阅读，也可以阅读。

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