jquery只檢查頁面上的一個圖像

Question

我在頁面上有幾個div，我想用jQuery向他們添加類。 但jQuery只檢查第一個backround-image的比率，並向所有div添加相同的類。

如何檢查所有背景圖像的比例？

段：

$(document).ready(function() { 
    var image_url = $('.class1').css('background-image'), 
     image; 

    // Remove url() or in case of Chrome url("") 
    image_url = image_url.match(/^url\("?(.+?)"?\)$/); 

    if (image_url[1]) { 
     image_url = image_url[1]; 
     image = new Image(); 

     // just in case it is not already loaded 
     $.each(image).load(function() { 
      // alert(image.width + 'x' + image.height); 
      var ratio = image.width/image.height; 

      if (ratio > 1) { 
       $(".class1").addClass("added_1"); 
      } else if (ratio < 1) { 
       $(".class1").addClass("added_2"); 
      } 
     }); 

     image.src = image_url; 

    }; 
}) 

Answer 1

使用jQuery的width()和height()方法。

試試這個

$.each(image, function() { 
     var ratio = $(this).width()/$(this).height(); 

     if (ratio > 1) { 
      $(".class1").addClass("added_1"); 
     } 
     else if (ratio < 1) { 
      $(".class1").addClass("added_2"); 
     } 
    }); 

    image.src = image_url; 

Answer 2

的$('.class1').each(function(){});

$(document).ready(function(){ 
    $('.class1').each(function(){ 
     var checkClass = $(this); 
     var image_url = checkClass.css('background-image'), 
     image; 

     // Remove url() or in case of Chrome url("") 
     image_url = image_url.match(/^url\("?(.+?)"?\)$/); 

     if (image_url[1]) { 
      image_url = image_url[1]; 
      image = new Image(); 

      // just in case it is not already loaded 
       $.each(image).load(function() { 
       // alert(image.width + 'x' + image.height); 
       var ratio = image.width/image.height; 

       if (ratio > 1) { 
        checkClass.addClass("added_1"); 
       } 
       else if (ratio < 1) { 
        checkClass.addClass("added_2"); 
       } 
      }); 

     image.src = image_url; 

     } 
    }); 
});