javascript - 如何正确使用.each

Question

我正在尝试让 jQuery 使用“image”类在 div 内找到图像的高度/宽度属性，然后将这些值作为 css 应用到具有“image”子类“overlay”的 div。下面的代码是我到目前为止所得到的。它适用于“图像”的一个实例。但我不确定如何让它遍历“图像”的每个实例并将正确的值应用于“叠加”。我玩过 .each 但我无法让它工作。

HTML：

<div class="image">
    <img src="some-img" width="400" height="200" />
    <div class="overlay"></div>
</div>

jQuery：

var height = $("img").attr("height");
var width = $("img").attr("width");

    $(".overlay").css({
        height: height,
        width: width
    });

提前致谢！

Answer 1

$(".image").each(function(index, el) {
    var $img = $("img", this); // equivalent: $(this).find("img")
    $(".overlay", this).css({
         height: $img.attr("height"),
         width: $img.attr("width")
    });
});

您还可以迭代img元素本身并使用它.next()来获取相应的叠加层。

Answer 2

我建议：

$('.image img').each(
    function(){
        var that = $(this),
            h = that.height(),
            w = that.width();
        that.next().css({ 'height' : h, 'width' : w });
    });