我在页面上有几个div,我正在尝试使用jQuery为它们添加类。 但是jQuery只检查第一个背景图像的比例,并将相同的类添加到所有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;
};
})
答案 0 :(得分: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;
答案 1 :(得分:0)
将所有内容放在$('.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;
}
});
});