循环遍历相同的类元素并分配宽度和高度答案

【问题标题】：loop through same class elements and assign width and height循环遍历相同的类元素并分配宽度和高度
【发布时间】：2017-05-21 00:18:42
【问题描述】：

我是 js 和 jQuery 的新手，我需要帮助来动态获取加载的 img 的宽度和高度，并将这些尺寸分配给绝对定位的元素 (.imgCover)。所有图像都有不同的尺寸。

下面的js代码只返回第一张图片的尺寸，不计入最后一张图片。我正在寻找一种方法来遍历所有元素，获取每个 (.imageHolder) 块中的照片尺寸 - 宽度和高度，并将它们分配给它们各自的 (.imgCover) div。

这是我当前的代码。

HTML

<div class="imageBlock">

<div class="imageHolder">
    <div class="imgCover"> </div>
    <img class="photo" src="images/img1.jpg"/>
</div>

<div class="imageHolder">
    <div class="imgCover"> </div>
    <img class="photo" src="images/img2.jpg"/>
</div>

<div class="imageHolder">
    <div class="imgCover"> </div>
    <img class="photo" src="images/img3.jpg"/>
</div>

 </div><!-- imageBlock-->

Javascript

var imageCover = $('.imgCover'),
    finalImage = $('.photo');

function resizeDiv() {
    imageCover.heightfinalImage.height());
imageCover.width(finalImage.width());
}

resizeDiv();

$(window).resize(function() {
    resizeDiv();
});

谢谢！

【问题讨论】：

标签： jquery loops

【解决方案1】：

将 resizeDiv() 替换为：

function resizeDiv() {

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

        var height = $(this).height();
        var width = $(this).width();

        var $imgCover = $(this).prev(); // get the previous element to the photo (the image cover)

        $imgCover.height(height);
        $imgCover.width(width);
    });

}

你快到了，你缺少的是 .each 循环

【讨论】：

谢谢！非常感谢。