如何正确使用.each

我试图让jQuery找到类“图像”div内图像的高度/宽度属性，然后将这些值作为css应用于类“覆盖”这是一个“形象”的孩子。下面的代码是我到目前为止。它适用于“图像”的一个实例。但我不确定如何让它通过“图像”的每个实例，并将正确的值应用于“叠加”。我玩过每个，但是我无法让它工作。如何正确使用.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 
    });

提前感谢！

来源

2012-09-09 John

难道这应该是事件驱动，或在DOM准备好了？ –

它应该只是加载准备好 – John

为什么不制作'.image''position：relative'和'.overlay'' position：absolute;宽度：100％;身高：100％; z-index：999'？ –

$(".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()来获取各自的覆盖。

来源

2012-09-09 18:08:11 Bergi

工作正常！非常感谢你。 – John

我建议：

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

来源

2012-09-09 18:08:31

我认为'.height（）'方法除了获取属性 – Bergi

之外还有其他的一些东西，我认为你应该使用'.attr（“height”）'因为图片加载需要一些时间。因此在准备文档时调用'.height（）'可能会给您一个意想不到的值（通常为0或32像素）。图像是否在缓存中也很重要。 –

它可能，但是假设所有图像都会设置“height”属性。在我自己的工作中几乎从未如此;如果这是一个问题，图像可能不会被加载，那么应该使用'$（window）.load（）'，而不是'$（document）.ready（）'。 –

如何正确使用.each

回答

相关问题