javascript - 为页面上的每个 div 单独运行 javascript 代码

Question

我从我网站上的数据库中提取了一些动态数据。

内容将有许多图像，最终将输出例如

<img class="buildimage" src="IMAGEURL"></img>
<img class="buildimage" src="IMAGEURL2"></img>
<img class="buildimage" src="IMAGEURL3"></img>

所有图像源都是外部 URL，可以是任意大小(比例不是文件大小)

我想要做的是，当页面加载时，它检查所有具有 buildimage 类的 div，然后检查它们的大小。如果它超过 X 数量，它会改变类别，如果不是它的另一个类别。

这个

$(document).ready(function () {
    var box = $(".blogtest"),
    img = box.find("img.buildimage");
    if (img.width() > 701) {
        $("img.buildimage").attr("class", "buildimage-large");
    } else if (img.width() < 700) {
        $("img.buildimage").attr("class", "buildimage-small");
    }
    })
});

有效，但它将页面上的所有图像设置为同一类。我明白为什么，但我只是不知道如何让这个函数分别“运行”每个图像并更改它们的类。

图像标签从 BB 转换为 html:

$text = str_replace("[img]", "<img class='buildimage' src='", "$text");
$text = str_replace("[/img]", "'>", "$text");

创建一个输出类的函数会更容易/可能吗？然后把它放在标签里。所以例如

$text = str_replace("[img]", "<img class='<script>getImageClass()<.script>' src='", "$text");

或者类似的东西？不确定最简单的方法。

克雷格

Answer 1

只需使用 JQuery "each" function

$.each(box.find("img.buildimage"), function(i, img){
    img = $(img);
    if (img.width() > 701) {
        img.attr("class", "buildimage-large");
    } else if (img.width() < 700) {
        img.attr("class", "buildimage-small");
    }
});