jQuery的 - 得到元素不同的值與同一類

Question

function ratioDetect() { 

    var contWidth = $('.thumbnail-container').width() 
    var contHeight = $('.thumbnail-container').height() 
    var imgWidth = $('.thumbnail-container img').width() 
    var imgHeight = $('.thumbnail-container img').height() 

    var contRatio = contWidth/contHeight 
    var imgRatio = imgWidth/imgHeight 

    if (contRatio > imgRatio) { 
     $('.thumbnail-container img').removeClass('full-height') 
     $('.thumbnail-container img').addClass('full-width') 
    } 
    else{ 
     $('.thumbnail-container img').removeClass('full-width') 
     $('.thumbnail-container img').addClass('full-height') 
    } 
} 

它應該很清楚這個函數做什麼，問題是我有這些「縮略圖容器」的6這樣的腳本只是從第一容器獲取值只有這個數學基於這個容器內的img，並將這些值應用於所有其他圖像。

我試着按照「.this」用法的一些教程，但我失敗了。我需要爲每個單獨的容器和他的孩子img單獨使用此代碼，因爲6 <img>中每一個的大小都不相同。

Answer 1

您需要遍歷容器和工藝

function ratioDetect() { 

    $('.thumbnail-container').each(function() { 
     var $this = $(this), 
      $img = $this.find('img'), 
      contWidth = $this.width(), 
      contHeight = $this.height(), 
      imgWidth = $img.width(), 
      imgHeight = $img.height(); 

     var contRatio = contWidth/contHeight, 
      imgRatio = imgWidth/imgHeight; 

     if (contRatio > imgRatio) { 
      $img.removeClass('full-height'); 
      $img.addClass('full-width'); 
     } else { 
      $img.removeClass('full-width'); 
      $img.addClass('full-height'); 
     } 
    }); 

}