如何正確使用.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

回答

相關問題